使用AngularJS和ng-repeat初始化选择?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

我正在尝试让选择框开始一个预先填充的选项,使用ng-重复与AngularJS 1.1.5。相反,SELECT总是从无选择开始。它也有一个空的选项,我不想要。我认为没有选择会产生副作用。

我可以用ng-options代替ng-repeat,但我想在这种情况下使用ng-重复。虽然我缩小的示例没有显示出来,但我也希望设置每个选项的title属性,据我所知,无法使用ng-options来实现这一点。

我不认为这与常见的AngularJs范围/原型继承问题有关。

下面是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为此:http://jsfiddle.net/coverbeck/FxM3B/2/

提问于
用户回答回答于

如果你不想用正确的方法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>

用户回答回答于

对于SELECT标签,RIAGE提供ng-Options指令。它为您提供了设置选项和设置默认值的特定框架。下面是使用ng选项进行更新的小提琴,如预期的那样工作: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>

扫码关注云+社区