Question

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

我可以使用ng-options而不是ng-repeat来实现这一点，但我想在这种情况下使用ng-repeat。虽然我的缩小示例没有显示，但我也想设置每个选项的title属性，据我所知，使用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/

Answer 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

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

根据建议你需要使用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>

Answer 6

如果您使用角度材质的md-select和ng-repeat ing md-option，则可以将ng-model-options="{trackBy: '$value.id'}"添加到this pen

中显示的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>

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

6 个答案: