CODEWITHSUNDEEP
javascriptangularjs
Liad Livnat
Liad Livnat

Reputation: 7475

AngularJS ng-option inside ng-repeat

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?

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

Upvotes: 11

Views: 3532

Answers (2)

Rishi Prakash
Rishi Prakash

Reputation: 1789

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

Upvotes: 1

Simon Wicki
Simon Wicki

Reputation: 4059

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>

Upvotes: 8

Related Questions