使用AngularJS和ng-repeat初始化select
我正在尝试让select-box从一个预先填充的选项开始，在AngularJS 1.1.5中使用ng-repeat。取而代之的是，select在开始时总是没有选择任何内容。它还有一个空选项，这是我不想要的。我认为没有选择任何内容会有副作用。
我可以使用ng-options而不是ng-repeat来实现这一点，但在这种情况下，我想使用ng-repeat。尽管我的缩小范围的示例没有显示它，但我还想设置每个选项的title属性，据我所知，使用ng-options无法做到这一点。
我不认为这与常见的AngularJs作用域/原型继承问题有关。至少我在Batarang检查的时候没有看到任何明显的东西。此外，当您使用UI在select中选择一个选项时，模型会正确更新。
下面是HTML：
<body ng-app ng-controller="AppCtrl">
<div>
Operator is: {{filterCondition.operator}}
</div>
<select ng-model="filterCondition.operator">
<option
ng-repeat="operator in operators"
value="{{operator.value}}"
>
{{operator.displayName}}
</option>
</select>
</body>和JavaScript：
function AppCtrl($scope) {
$scope.filterCondition={
operator: 'eq'
}
$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]
}回答 5
Stack Overflow用户
发布于 2013-09-06 06:57:19
对于select标记，angular提供了ng-options指令。它为您提供了设置选项和设置默认值的特定框架。下面是使用ng-options的更新后的fiddle，它可以像预期的那样工作：http://jsfiddle.net/FxM3B/4/
更新的HTML (代码保持不变)
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>Stack Overflow用户
发布于 2015-02-10 14:49:26
angular将一个空的option元素注入select的事实是，默认情况下绑定到它的模型对象在初始化时带有一个空值。
如果您想选择一个默认选项，那么您可以在控制器中的作用域上设置它
$scope.filterCondition.operator = "your value here";如果你想要一个空的选项占位符，这对我是有效的
<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
<option value="">Choose Operator</option>
</select>Stack Overflow用户
发布于 2013-09-06 07:56:17
感谢TheSharpieOne指出了ng-selected选项。如果这是作为答案而不是评论发布的，我会让它成为正确的答案。
下面是一个有效的JSFiddle：http://jsfiddle.net/coverbeck/FxM3B/5/。
我还更新了fiddle以使用title属性，这是我在最初的帖子中遗漏的，因为它不是问题的原因(但这是我想使用ng-repeat而不是ng-options的原因)。
HTML：
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
<option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>JS：
function AppCtrl($scope) {
$scope.filterCondition={
operator: 'eq'
}
$scope.operators = [
{value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
{value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
]
}https://stackoverflow.com/questions/18647098
复制相似问题