Menu
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?
614
ng-options is the directive which is designed specifically to populate the items of a dropdown list. One major advantage using ng-options for the dropdown is, it allows us to pass the selected value to be an object. Whereas, using ng-repeat the selected value can only be string.
The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values.
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property.
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>
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
