Question

我有一个选择下拉列表，其选项是从名为$scope.bars的对象中重复的。

但是，我的ng-model（设置为$scope.bars的子值）未正确选择选项。相反，默认情况下，选择框为空，表示“未定义”值。

这是我的HTML：

<div ng-app="programApp" ng-controller="programController">
  <label>Level: 
    <select ng-model="advancedFilters">
      <option ng-repeat="item in bars" value="item.id">{{item.name}}</option>
    </select>
  </label>
</div>

这是我的角色代码：

angular.module('programApp', [
    'programApp.controllers',
]);
angular.module('programApp.controllers', [])
    .controller('programController', ['$scope',  
    function($scope){

      $scope.advancedFilters = 1;

      $scope.bars = [
        {'name':'First',
          'id':1},
        {'name':'Second',
          'id':2},
        {'name':'Third',
          'id':3},
        {'name':'Fourth',
          'id':4},
        {'name':'Fifth',
          'id':5}];
    }]);

因为$scope.advancedFilters等于1，所以下拉列表应显示“First”选项，因为第一个下拉选项的id值为1.相反，下拉列表为空白，表示ng-model出现问题

我该如何解决这个问题？

在此处查看Codepen：http://codepen.io/trueScript/pen/PqbVyv

Answer 1

如果你使用ng-repeat进行选择，你会遇到这类问题。请尝试使用ng-options。即

 <select ng-options="item.id as item.name for item in bars" 
         ng-model="advancedFilters">
</select>

<强> Demo

item.id as item.name for item in bars代表

selectedValue as displayName for item in list

即使您没有定义ng-model或列表中的某个项目，您也可以通过以下方式设置默认选项：

<select ng-options="item.id as item.name for item in bars" 
         ng-model="advancedFilters">
   <option value="">--Please Select--</option>
</select>

否则，在使用ng-repeat时需要提供插值（value="{{item.id}}"）的值，即

<option ng-repeat="item in bars" 
        value="{{item.id}}">{{item.name}}</option>

<强> Demo

使用ng重复选项指定Angular ngModel值

1 个答案: