Angularjs - 如何使用ng-repeat选择?

gel*_*ara 11 angularjs

在下面的视图中,我试图根据当前ng-repeat对象(用户)中可用的键(colorId)在下拉框中选择一个值.有谁知道这是怎么做到的吗?

<div ng-app>
  <div ng-controller="MyCntrl">
    <table>
        <thead >
                <tr>
                    <th width="50%">User</th>
                    <th width="50%" >Color</th>            
                </tr>
          </thead>
     <tbody>
         <tr ng-repeat="user in users">
             <td width="50%">{{user.name}}</td>
             <td width="50%"> 
                 <select ng-model="user.colorid" ng-options="color.name for color in colors">
                          <option value="">Select color</option>
        </select>
             </td>
         </tr>  
      </tbody>
    </table>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

控制器代码是:

'use strict';

angular.module('nes',)
  .controller('MyCntrl',['$scope',function ($scope) {
   $scope.colors = [
    {id:'1', name:'blue'},
    {id:'2', name:'white'},
    {id:'2', name:'red'}
  ];

    $scope.users = [
        { name:'user1',colorId:'1'},
        { name:'user2',colorId:'2'}
    ];
}]);   
Run Code Online (Sandbox Code Playgroud)

Ben*_*esh 23

你需要修复<select>元素中的一些东西:

color.id as color.name你的NG选项.

ng-options="color.id as color.name for color in colors"
Run Code Online (Sandbox Code Playgroud)

你打错了"colorid":

ng-model="user.colorId"
Run Code Online (Sandbox Code Playgroud)

以下是它的工作:http ://plnkr.co/edit/DptvZuamWv9waFzI0Rcp? p= preview