2015-01-13 12 views
8

Vấn đề rất đơn giản, nhưng không chắc chắn làm thế nào để giải quyết nóAngularJS ng-tùy chọn bên trong ng-repeat

Tôi có ng-lặp lại, đó mô hình lặp video.

mô hình có giá trị được chọn và tôi muốn nhìn thấy nó trong danh sách thả xuống:

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

đây là mô hình video:

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

này là mục videoList:

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

đơn giản là tôi hy vọng thấy giá trị thả xuống đầu tiên sẽ được đặt thành VIDEO_ONE giá trị thả xuống thứ hai sẽ được đặt thành VIDEO_TWO.

Hiện tại danh sách thả xuống trống.

Làm cách nào để đạt được điều đó?

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

Trả lời

7

Bạn chỉ cần thiết lập một giá trị cho ng-tùy chọn với item.id as item.name for item in videoList. xem mã bên dưới.

(i thiết lập id như giá trị, vì tôi nghĩ rằng nó phù hợp hơn. Ở đâu đó bạn cũng cần phải cập nhật name thuộc tính của bạn theo id. Hoặc ngược verca. Sự lựa chọn của bạn.)

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 !! nó làm việc, tôi sẽ đánh dấu nó như được chấp nhận trong một phút –

+0

khi tôi đang thay đổi giá trị chỉ id đang thay đổi và tên không phải là, bạn có bất kỳ ý tưởng tại sao? "video": [{"id": 1, "name": "VIDEO_ONE"}, {"id": 2, "name": "VIDEO_TWO"}] –

+0

như tôi đã đề cập, nó chỉ cập nhật thuộc tính 'id' . tôi sẽ để thuộc tính 'name' ra, bởi vì nó thừa, nếu bạn lấy tên từ' 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> 
Các vấn đề liên quan