用 AngularJS 和 ng-repeat 初始化 select

我正在尝试使用 AngularJS1.1.5中的 ng- 重复命令使用一个预填充选项来启动选择框。相反，select 始终在开始时没有选择任何内容。它还有一个空选项，这是我不想要的。我认为没有被选中是有副作用的。

我可以使用 n- 选项而不是 n- 重复来完成这项工作，但是在这种情况下我想使用 n- 重复。虽然我缩小的示例没有显示它，但是我还想设置每个选项的 title 属性，据我所知，使用 n- 选项是无法做到这一点的。

我不认为这与通常的 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'}
]
}

JS Fiddle for this: http://jsfiddle.net/coverbeck/FxM3B/2/

262954 次浏览
小开

正如建议的那样，您需要使用 n- 选项，不幸的是，我认为您需要引用数组元素作为默认值(除非数组是字符串数组)。

Http://jsfiddle.net/fxm3b/3/

JavaScript:

function AppCtrl($scope) {




$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]


$scope.filterCondition={
operator: $scope.operators[0]
}
}

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: \{\{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>
小开

对于 select 标记，angle 提供了 ng-options 指令。它为您提供了设置选项和设置默认值的特定框架。下面是使用 n- 选项更新的小提琴，其工作原理与预期的一样: 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>
小开

感谢 记号笔指出了 ng 选择的选项。如果这是一个答案，而不是一个评论，我会作出正确的答案。

这是一个可用的 JSFiddle: http://jsfiddle.net/coverbeck/FxM3B/5/。

我还更新了小提琴，使用 title 属性，这个属性在我最初的文章中被省略了，因为它不是问题的原因(但这也是我想使用 n- 重复而不是 n- 选项的原因)。

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>

约翰逊:

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'}
]
}
小开
最佳答案

好的。如果您不想使用正确的方式 ng-options，您可以添加 ng-selected属性与一个条件检查逻辑的 option指令，使预选工作。

<select ng-model="filterCondition.operator">
<option ng-selected="\{\{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="\{\{operator.value}}">
\{\{operator.displayName}}
</option>
</select>

Working Demo

小开

Angle 向 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>
小开

如果您使用的是 md-select 和 ng-repeat ing md-option，那么您可以将 ng-model-options="{trackBy: '$value.id'}"添加到如 这支笔所示的 md-select 标记 ash 中

密码:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
<md-select-label>\{\{ user ? user.name : 'Assign to user' }}</md-select-label>
<md-option ng-value="user" ng-repeat="user in users">\{\{user.name}}</md-option>
</md-select>


提交答案