如何生成带有选项和默认选项标记的选择元素'选择'?
例如,我的选项数组:
$scope.options = [
{
"value": 1,
"label": "One",
"selected": true
},
{
"value": 2,
"label": "Two"
},
{
"value": 3,
"label": "Three"
}
];
和角度html:
<select name="">
<option ng-repeat=" option in options " value="{{ option.value }}" ng-selected=" option.selected === true "> {{ option.label }}</option>
</select>
所以,我需要生成这样的东西:
<select name="">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
我想使用ng-options
。
由于
答案 0 :(得分:0)
对于使用 ng-options 的这种复杂对象,这是更好的选择。所以你可以用这段代码来做。
<select ng-options="option.value as option.label for option in options" ng-model="yourModel">
</select>
我只添加了 ng-model ,ng-options需要工作,只需将模型设置为您希望自动设置的值...
答案 1 :(得分:0)
var enemyHealth = Convert.ToInt32(lbl_Health_value_Enemy.Text);
var heroHealth = Convert.ToInt32(lbl_Health_Value_Hero.Text);
在您的控制器中,您应该将模型设置为选定的模型
<select ng-model="selectedOpt" ng-options="option.value for option in options" ng-change="setOption(selectedOpt)">
答案 2 :(得分:0)
要拥有默认选项,必须首先填充列表,否则您将收到错误或空白选项。您可以在控制器中执行此操作。这是一个小提琴 https://jsfiddle.net/rosstroha/3dcthfwh/3/
示例控制器:
var myApp = angular.module('myApp',[]);
angular.module('myApp').controller('MyCtrl', MyCtrl);
function MyCtrl($scope) {
$scope.optionList = [
{value: "val1"},
{value: "val2"}
]
$scope.selectedOption = $scope.optionList[0];
}
<强> HTML:强>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="selectedOption" ng-options="option.value for option in optionList">
</div>
</div>
您可以选择添加另一个始终存在的选项
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="selectedOption" ng-options="option.value for option in optionList">
<option disabled value="">Select</option>
</div>
</div>