Angularjs - how to use select with ng-repeat?

Question

In the view available below I'm trying to select a value in the drop down box based on a key(colorId) available in the current ng-repeat object(user). Does anyone know how to do that?

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

The controller code is:

'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'}
    ];
}]);

Ben Lesh · Accepted Answer · 2013-07-10 15:05:58Z

23

You need to fix a few things in your <select> element:

use color.id as color.name in your ng-options.

ng-options="color.id as color.name for color in colors"

you typoed "colorid":

ng-model="user.colorId"

Here's a plunk of it working: http://plnkr.co/edit/DptvZuamWv9waFzI0Rcp?p=preview

answered Jul 10, 2013 at 15:05

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yonoss Over a year ago

Thanks a lot for your quick response !

Collectives™ on Stack Overflow

Angularjs - how to use select with ng-repeat?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related