2013-07-10 5 views
10

In der unten verfügbaren Ansicht versuche ich, einen Wert in der Dropdown-Box basierend auf einem Schlüssel (colorId) auszuwählen, der im aktuellen ng-repeat-Objekt (user) verfügbar ist. Weiß jemand, wie man das macht?Angularjs - wie benutzt man mit ng-repeat?

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

Der Controller-Code ist:

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

Antwort

23

Sie müssen ein paar Dinge in Ihrem <select> Elemente beheben:

Verwendung color.id as color.name in Ihren ng-Optionen.

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

Sie typoed "ColorID":

ng-model="user.colorId" 

hier ein zupfen davon arbeiten: http://plnkr.co/edit/DptvZuamWv9waFzI0Rcp?p=preview

+0

Vielen Dank für Ihre schnelle Antwort! –

Verwandte Themen