用ng-repeated選項指定角度ngModel值

Question

我有一個選擇下拉菜單，其選項正在從名爲$scope.bars的對象中重複出現。

但是，我的ng模型，它被設置爲$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，則下拉應顯示「第一」的選擇，因爲第一個下拉選項ID值爲1.相反，下拉列表爲空，表示ng模型存在問題。

我該如何解決這個問題？

看到一個Codepen這裏：http://codepen.io/trueScript/pen/PqbVyv

Answer 1

你要如果使用NG-重複的選擇要運行到這些類型的問題。請嘗試使用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-模型或在列表中的項目沒有一個，你可以建立一個默認選項以及這樣做：

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

否則，您需要提供價值爲插值（value="{{item.id}}"）採用NG-重複時，即

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

Demo