初始化选择与AngularJS和NG-重复 [英] Initializing select with AngularJS and ng-repeat
问题描述
我试图得到一个选择,开始了一个选项pre-选择使用AngularJS 1.1.5和NG-重复。相反,选择总是开始时什么也没有选择。它也有一个空的选项,我不希望 - 但我认为这是被选中的任何副作用
I'm trying to get a select to start off with one option pre-selected using AngularJS 1.1.5 and ng-repeat. Instead the select always starts out with nothing selected. It also has an empty option, which I don't want -- but I think that is a side effect of nothing being selected.
我能得到这个使用NG选项,而不是NG重复的工作,但我想用NG-重复这种情况。虽然我的收窄例子并没有表现出来,我也想设置每个选项的title属性,并没有办法做到这一点使用NG-选项,据我所知。
I can get this working using ng-options instead of ng-repeat, but I want to use ng-repeat for this case. Although my narrowed down example doesn't show it, I also want to set the title attribute of each option, and there is no way to do that using ng-options, as far as I know.
我不认为这是关系到普通AngularJs范围/原型的继承问题。至少在Batarang检查时,我看不出有什么明显的。另外,当你选择一个选项,在选择与UI,模型确实更新正确。
I don't think this is related to the common AngularJs scope/prototypical inheritance issue. At least I don't see anything obvious when inspecting in Batarang. Plus, when you pick an option in the select with the UI, the model does update correctly.
这里是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的:
And the JavaScript:
function AppCtrl($scope) {
$scope.filterCondition={
operator: 'eq'
}
$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]
}
和JS的小提琴: http://jsfiddle.net/coverbeck/FxM3B/2/
感谢您的帮助,
查尔斯
推荐答案
确定。如果你不希望使用正确的方法 NG-选项
,你可以添加 NG-选择
属性用为选项条件检查电路
指令,使pre-选择的工作。
OK. If you don't want to use the correct way ng-options
, you can add ng-selected
attribute with a condition check logic for the option
directive to to make the pre-select work.
<select ng-model="filterCondition.operator">
<option ng-selected="{{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="{{operator.value}}">
{{operator.displayName}}
</option>
</select>
<大骨节病> 工作演示 骨节病>
这篇关于初始化选择与AngularJS和NG-重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!