137

我试图让选择框从使用 ng-repeat 和 AngularJS 1.1.5 的预填充选项开始。相反，选择总是从没有选择任何内容开始。它还有一个空选项，我不想要。我认为没有任何选择会产生副作用。

我可以使用 ng-options 而不是 ng-repeat 来完成这项工作，但我想在这种情况下使用 ng-repeat。尽管我缩小的示例没有显示它，但我也想设置每个选项的标题属性，据我所知，使用 ng-options 无法做到这一点。

我认为这与常见的 AngularJs 范围/原型继承问题无关。至少我在 Batarang 检查时没有看到任何明显的东西。另外，当您在 UI 中选择一个选项时，模型会正确更新。

这是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 小提琴：http: //jsfiddle.net/coverbeck/FxM3B/2/

4

6 回答 6

232

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>

Working Demo

于 2013-09-06T05:26:34.387 回答
36

对于 select 标签，angular 提供了 ng-options 指令。它为您提供了设置选项和设置默认值的特定框架。这是使用 ng-options 的更新小提琴，按预期工作：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>
于 2013-09-05T22:57:18.667 回答
10

angular 向 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>
于 2015-02-10T06:49:26.347 回答
9

感谢TheSharpieOne指出 ng-selected 选项。如果那是作为答案而不是作为评论发布的，我会做出正确的答案。

这是一个有效的 JSFiddle：http: //jsfiddle.net/coverbeck/FxM3B/5/。

我还更新了小提琴以使用我在原始帖子中遗漏的 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'}
     ]
}
于 2013-09-05T23:56:16.557 回答
1

正如建议的那样，您需要使用 ng-options 不幸的是，我相信您需要引用数组元素作为默认值（除非数组是字符串数组）。

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>
于 2013-09-05T22:54:14.960 回答
1

如果您使用 angular material 中的 md-select 和 ng-repeat 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>

于 2016-07-28T14:49:26.290 回答