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

Initializing select with AngularJS and ng-repeat

本文关键字：初始化 选择 ng-repeat AngularJS 使用      更新时间：2023-09-26

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

我可以使用 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'}
     ]
}

JS小提琴：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>

工作演示

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

angular 向选择注入空选项元素的事实是，默认情况下绑定到它的模型对象在初始化时带有一个空值。

如果要选择默认选项，则可以在控制器中的示波器上设置它 

$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>

感謝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'}
     ]
}

正如建议的那样，您需要使用 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>

如果您使用角度材质的 md-select 和 ng 重复 md-option ，则可以将ng-model-options="{trackBy: '$value.id'}"添加到本笔中显示的 md-select 标签灰分中

法典：

<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>

相关文章：