使用 select 下拉列表中的选项 ID 而不是选项值更新数据模型

Question

我是 angular js 的新手。我有一个 json 值，我将根据该值填充我的 html。我需要用两个选项填充 select 下拉菜单，并根据 json.

中提到的标志自动 selected

下面是我的json

$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 中，每当我在下拉列表中更改我的选项时，我的模型都会随着选项 selected 的值而改变。相反，我希望在我的模型中更新选项的 ID，因为我需要根据新的 select 选项处理更新后的模型。

提前致谢

Answer 1

您可以使用 angular 的 ng-options，它会在预填 ng-model 时自动选择正确的：

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

然后在你的 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>

见this working jsfiddle

使用 select 下拉列表中的选项 ID 而不是选项值更新数据模型

update data-model with option id instead of option value in select dropdown

html

angularjs

angular-ngmodel