설정하기 전에 값을 선택하십시오.

Question

AngularJS를 사용하여 캡처 한 서비스에서 검색 한 개체의 레코드가 채워진 테이블이 있습니다. 해당 행을 편집 할 수 있도록 테이블에 확인란이 있습니다. 행 내에서 행의 "편집"체크 상자를 클릭 할 때 행의 원래 값으로 설정해야하는 선택 상자가 있습니다. 선택하는 모든 다른 값으로 선택을 채우는 동안 .

다음은 테이블과 선택 상자를 채우는 코드입니다. 나의 겸허 한 경험

 <thead> 
      <tr> 
       <th class="col-lg-2">Sub Program</th> 
       <th class="col-lg-6">Description</th> 
       <th class="col-lg-2">Program</th> 
       <th class="col-lg-1">Edit</th> 
       <th class="col-lg-1">Update/Delete</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="timeAllocationSubProgram in timeAllocationSubPrograms"> 
       <td ng-hide="checked">{{timeAllocationSubProgram.subProgramName}}</td> 
       <td ng-hide="checked">{{timeAllocationSubProgram.subProgramDescription}}</td> 
       <td ng-hide="checked">{{timeAllocationSubProgram.programName}}</td> 
       <td ng-show="checked"> 
        <input class="form-control" value="{{timeAllocationSubProgram.subProgramName}}" 
          ng-model="timeAllocationSubProgram.subProgramName" /> 
       </td> 
       <td ng-show="checked"> 
        <input class="form-control" value="{{timeAllocationSubProgram.subProgramDescription}}" 
          ng-model="timeAllocationSubProgram.subProgramDescription" /> 
       </td> 
       <td ng-show="checked"> 
        <select class="form-control" ng-options="timeAllocationProgram as timeAllocationProgram.programName 
          for timeAllocationProgram in timeAllocationPrograms track by timeAllocationProgram.programName" ng-model="timeAllocationProgram" 
          ng-change="selectProgram(timeAllocationProgram)"></select> 
       </td> 
       <td> 
        <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"/> 
       </td> 
       <td> 
        <button class="btn btn-xs btn-primary" ng-click="editTimeAllocationSubProgram(timeAllocationSubProgram)" 
          ng-show="checked"> 
         Update 
        </button> 
        <button class="btn btn-xs btn-primary" ng-click="deleteTimeAllocationSubProgram(timeAllocationSubProgram)" 
          ng-hide="checked"> 
         Delete 
        </button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

Answer 1

, 겨 모델을하는 각도에 연결된 입력에 기본값을 설정하는 가장 좋은 방법은, 단순히 NG-모델에 기본 값을 설정한다.

NG-옵션은 여기에 따라서

<options ng-repeat="timeAllocationProgram in timeAllocationPrograms"> 

을 remplacing되고, (이 NG 모델의 지시로 작성된 것입니다 무엇으로) timeAllocation이 서비스에서 데이터를로드 할 때 당신이 원하는 기본값으로 설정되어있는 경우, 그것을 올바르게 표시해야합니다.

주제는 여기에 이미뿐만 아니라 대답 한 것으로 보인다 plunker으로, 링크의 모든의

how to use ng-option to set default value of select element