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

javascript angularjs

2022-08-30 04:15:55

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

我可以使用ng选项而不是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'}
     ]
}

JS小提琴为此：http://jsfiddle.net/coverbeck/FxM3B/2/

答案 1

还行。如果不想使用正确的方法，可以添加带有条件检查逻辑的属性，以使指令的预选工作。ng-optionsng-selectedoption

<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

答案 2

对于选择标签，angular 提供 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>