選択ドロップダウンでオプション値の代わりにオプションIDを持つデータモデルを更新

Question

角度jを初めて使用しています。私は、私は自分のhtmlに値を設定することに基づいてjsonの値を持っています。私は、2つのオプションを持つ選択ドロップダウンを設定し、jsonに記載されているフラグに基づいて1つを自動的に選択する必要があります。

は以下

$scope.alertdata=[{"Action": "1", "Name":"Peter"},{"Action": "2", "Name":"Steve"},{"Action": "3", "Name":"Khan"}] 

マイHTML

<tr ng-repeat="data in alertdata"> 
    <td> 
<select ng-model="data.Action"> 
          <option ng-selected="data.Action == '1' " id="data.Action">Option1</option> 
          <option ng-selected="data.Action == '2' " id="data.Action">Option2</option> 
          <option ng-selected="data.Action == '3' " id="data.Action">Option3</option> 
          <option ng-selected="data.Action == '4' " id="data.Action">Option4</option> 
         </select> 
</td> 
</tr> 

私は私のモデルが選択されたオプションの値が変更されたドロップダウンに私のオプションを変更するたびに上記のHTMLでは、私のJSONです。代わりに私はオプションの新しい選択に基づいて更新されたモデルを処理する必要があるので、私は自分のモデルでオプションのIDを更新したい。アドバンス

で

おかげ

Answer 1

あなたはng-modelが予め充填されたときに自動的に正しいものを選択する、角度のng-optionsを使用することができます。

あなたのhtmlで次に

$scope.availableOptions = [ 
    { id: "1", name: "Option1" }, 
    { id: "2", name: "Option2" }, 
    { id: "3", name: "Option3" }, 
    { id: "4", name: "Option4" } 
]; 

：

<tr ng-repeat="data in alertdata"> 
    <td> 
     <select ng-model="data.Action" 
       ng-options="option.id as option.name for option in availableOptions"> 
     </select> 
    </td> 
</tr> 

this working jsfiddle