Question

我是棱角分明的新手。我有一个json值，我将填充我的HTML。我需要使用两个选项填充选择下拉列表，并根据json中提到的标志选择一个自动选项。

以下是我的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中，每当我在下拉列表中更改我的选项时，我的模型都会更改为所选选项的值。相反，我希望在我的模型中更新选项的ID，因为我需要根据新选项选择处理更新的模型。

提前致谢

Answer 1

您可以使用有角度的ng-options，ng-model会在$scope.availableOptions = [ { id: "1", name: "Option1" }, { id: "2", name: "Option2" }, { id: "3", name: "Option3" }, { id: "4", name: "Option4" } ];预先填充时自动选择正确的<{1}}：

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

然后在你的html：

input[data-val-required], select[data-val-required] {
    border: 1px solid #EFA4A4 !important;
}

select[data-val-required], select[data-val-required] {
    border: 1px solid #EFA4A4 !important;
}

请参阅this working jsfiddle

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

1 个答案: