編集する前に選択値を値に設定します

Question

私は、AngularJSを使ってキャプチャしたサービスから取得したオブジェクトのレコードが入ったテーブルを持っています。その行を編集できるようにするためのチェックボックスがテーブルにあります。行内には、行の「編集」チェックボックスをクリックしたときにその行の元の値にデフォルト値を設定する必要がある選択ボックスがありますが、それ以外の値を選択するには。

以下は、テーブルと選択ボックスに入力するコードです。私の謙虚な経験、角度でのNG-モデルにリンクされている入力にデフォルト値を設定するための最良の方法で

 <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