zaktualizuj model danych za pomocą id opcji zamiast wartości opcji w select dropdown - html, angularjs, angular-ngmodel

Jestem nowy w kanciastych js. Mam wartość json, na podstawie której będę wypełniać mój HTML. Muszę wypełnić listę rozwijaną wyboru dwiema opcjami i dokonać jednego wyboru automatycznego na podstawie flagi wymienionej w jsonie.

Poniżej jest mój json

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

Mój 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>

W powyższym kodzie HTML za każdym razem, gdy zmieniam opcjęlista rozwijana mojego modelu jest zmieniana z wartością wybranej opcji. Zamiast tego chcę, aby identyfikator opcji został zaktualizowany w moim modelu, ponieważ wymagam przetworzenia zaktualizowanego modelu na podstawie nowego wyboru opcji.

Z góry dziękuję

Odpowiedzi:

Możesz użyć kątowych ng-options, który automatycznie wybiera właściwy, gdy ng-model jest wstępnie wypełniony:

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

Następnie w HTML:

<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>

Widzieć to działa jsfiddle