2015-01-13 7 views
8

Sehr einfaches Problem, aber nicht sicher, wie es zu lösenAngularJS ng-option innerhalb ng-repeat

Ich habe ng-wiederholen, das Modell Video iterieren.

das Modell hat einen gewählten Wert und ich möchte es in der Dropdown-Liste, um zu sehen:

<div data-ng-repeat="singleVideo in model.videos"> 
    {{singleVideo}}<select data-ng-model="singleVideo.name" ng-options="item.name for item in videoList"></select> 
</div> 

dieses Modell Video ist:

$scope.model = { 
       videos:[ 
        {id:1,name:"VIDEO_ONE"}, 
        {id:2,name:"VIDEO_TWO"} 
       ] 
      } 

dies ist die Videolist Artikel:

$scope.videoList = [ 
       {id:1,name:"VIDEO_ONE"}, 
       {id:2,name:"VIDEO_TWO"}, 
       {id:3,name:"VIDEO_Three"} 
      ]; 

ich erwarte einfach zu sehen, dass der erste Dropdown-Wert auf VIDEO_ONEgesetzt wirdDer zweite Dropdown-Wert wird auf VIDEO_TWO gesetzt.

Momentan ist das Dropdown-Menü leer.

Wie kann ich das erreichen?

This is the expected result, currently i'm getting the dropdown boxes empty

Antwort

7

Sie müssen nur mit item.id as item.name for item in videoList einen Wert für die ng-Optionen einzustellen. Siehe Code unten.

(i stellen Sie die id als der Wert, da ich es ist besser geeignet denken. Irgendwo Sie müssen auch. Oder umge verca. Ihre Wahl nach id Ihr name Attribut aktualisieren.)

angular.module('testapp', []) 
 
.controller('appCtrl', function($scope) { 
 
    $scope.model = { 
 
    videos:[ 
 
     {id:1,name:"VIDEO_ONE"}, 
 
     {id:2,name:"VIDEO_TWO"} 
 
    ] 
 
    }; 
 
    
 
    $scope.videoList = [ 
 
    {id:1,name:"VIDEO_ONE"}, 
 
    {id:2,name:"VIDEO_TWO"}, 
 
    {id:3,name:"VIDEO_Three"} 
 
    ]; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="testapp"> 
 
    <div ng-controller="appCtrl"> 
 
    <div ng-repeat="singleVideo in model.videos"> 
 
     {{singleVideo.name}} 
 
     <select ng-model="singleVideo.id" ng-options="item.id as item.name for item in videoList" ng-selected="true"></select> 
 
    </div> 
 
    </div> 
 
</body>

+0

Yey !! es funktionierte, ich werde es als akzeptiert in einer Minute –

+0

, wenn ich den Wert ändern ID ändert sich nur und der Name ist nicht, haben Sie eine Idee, warum? "videos": [{"id": 1, "name": "VIDEO_ONE"}, {"id": 2, "name": "VIDEO_TWO"}] –

+0

Wie bereits erwähnt, wird nur das Attribut 'id' aktualisiert . Ich würde das 'name' Attribut verlassen, weil es überflüssig ist, wenn Sie den Namen von' videoList' nehmen. – zwacky

1
<div data-ng-repeat="singleVideo in model.videos"> 
    {{singleVideo}}<select data-ng-model="singleVideo.name" ng-options="item.name as item.name for item in videoList"></select> 
</div> 
Verwandte Themen