AngularJS ng-option inside ng-repeat
Question
Very simple problem, but not sure how to solve it
I have ng-repeat, that iterate model video.
the model has a chosen value and I want to see it in the dropdown list:
<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>
this is the video model:
$scope.model = {
videos:[
{id:1,name:"VIDEO_ONE"},
{id:2,name:"VIDEO_TWO"}
]
}
this is the videoList item:
$scope.videoList = [
{id:1,name:"VIDEO_ONE"},
{id:2,name:"VIDEO_TWO"},
{id:3,name:"VIDEO_Three"}
];
simply I expect to see that the first dropdown value will be set to VIDEO_ONE the second dropdown value will be set to VIDEO_TWO.
Currently the dropdown is empty.
How can I achieve that?
2 answers
solution1
8 ACCPTED 2015-01-13 13:12:25
You just need to set a value for the ng-options with item.id as item.name for item in videoList . see code below.
(i set the id as the value, since i think it's better suited. somewhere you also need to update your name attribute according to id . or vice verca. your choice.)
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>
solution2
1 2015-01-13 13:13:22
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.