返回
AngularJS ng-options 设置选项的值属性 | 详细指南
javascript
2024-03-09 19:25:27
使用 ng-options 在 AngularJS 中设置选项的值属性
问题
AngularJS 中的 ng-options 指令是一个强大的工具，用于填充 <select> 标记。它可以轻松地设置选项的文本，但是当需要设置选项的 value 属性时，事情可能会变得有些混乱。
解决方法
默认情况下，ng-options 会将选项的 value 设置为选项的文本。但是，你可以使用 select p.value as p.text 语法来覆盖这个行为，其中：
p.value是选项的值属性p.text是选项的文本属性
代码示例
下面的代码示例展示了如何使用 ng-options 设置选项的 value 属性：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-options="select p.value as p.text for p in resultOptions"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.resultOptions = [
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
];
});
</script>
</body>
</html>
结论
设置 ng-options 中选项的 value 属性非常简单。通过使用 select p.value as p.text 语法，你可以轻松地将选项的值设置为所需的任何值。
常见问题解答
1. 如何设置选项的 value 为数字？
ng-options="select p.value as p.text for p in resultOptions"
2. 如何设置选项的 value 为字符串？
ng-options="select p.value as p.text for p in resultOptions"
3. 如何设置选项的 value 为对象？
ng-options="select p.value.id as p.text for p in resultOptions"
4. 如何禁用特定的选项？
ng-options="select p.value as p.text for p in resultOptions" disabled
5. 如何将默认选项设置为特定值？
ng-options="select p.value as p.text for p in resultOptions" ng-model="selectedValue"
