使用AngularJS和ng-repeat初始化select

小编典典

使用AngularJS和ng-repeat初始化select

javascript

我正在尝试使用AngularJS 1.1.5的ng-
repeat来让选择框从预填充选项开始。相反，选择始终始于未选择任何内容。它还有一个空选项，我不想要。我认为没有选择任何东西都会带来副作用。

我可以使用ng-options代替ng-repeat来工作，但是在这种情况下我想使用ng-
repeat。尽管我缩小的示例没有显示，但我也想设置每个选项的title属性，据我所知，没有办法使用ng-options来实现。

我认为这与常见的AngularJs范围/原型继承问题无关。至少在巴塔朗检查时，我看不到任何明显的东西。另外，当您在带有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'}
     ]
}

阅读 337

2020-05-01

共1个答案

小编典典

好。如果您不想使用正确的方法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](http://jsfiddle.net/dCFd2/)**

2020-05-01