2015-01-13 2 views
8

Очень простая проблема, но не уверен, как решить этоAngularJS нг-вариант в нг-повтора

Я нг-повтор, что итерация модели видео.

модель имеет выбранное значение, и я хочу увидеть его в списке:

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

это видео модель:

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

это элемент videoList:

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

просто я ожидаю увидеть, что первое выпадающее значение будет установлено на VIDEO_ONE второе значение выпадающего значения будет установлено на VIDEO_TWO.

В настоящее время выпадающий список пуст.

Как я могу это достичь?

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

ответ

7

Вам просто нужно установить значение для нг-вариантов с item.id as item.name for item in videoList. см. код ниже.

(я установить идентификатор как значение, так как я считаю, что лучше всего подходит. Где также необходимо обновить атрибут name в соответствии с идентификатором. Или вице verca. Ваш выбор.)

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 !! это сработало, я помечаю его как принятое через минуту –

+0

, когда я меняю значение, только идентификатор меняется, а имя нет, есть ли у вас какие-либо идеи, почему? «videos»: [{«id»: 1, «name»: «VIDEO_ONE»}, {«id»: 2, «name»: «VIDEO_TWO»}] –

+0

, как я уже упоминал, он обновляет атрибут 'id' , я оставил бы атрибут 'name', потому что он избыточен, если вы берете имя из' videoList'. – 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>