Search code examples
angularjsangularjs-ng-repeatng-options

Angular: ng-options in ng-repeat


I have a collection of request and each request has collection of status. I am trying to create a dropdown for each request and populate with their statuses. How can I read the selected status for each request?

Sample controller is:

// Code goes here
var app = angular.module('demo', []);


app.controller('myController', function($scope){
$scope.requests=[{"name": "Request1", 
                  "statusList": [{ "name": "status1", "isSelected": true },
                                 { "name": "status2", "isSelected": false }
                                ]
                },{"name": "Request2", 
                   "statusList": [{ "name": "status3","isSelected": false },
                                 { "name": "status4", "isSelected": false }
                    ]
                }];

});

and sample html:

<div class="container" ng-controller="myController">
<div>

    <ul ng-repeat="request in requests">
      {{request.name}}
  <li>
    <select class="form-control" ng-options="status as status.name for status in request.statusList" ng-model="selectedStatus"></select>
  </li>
</ul>

  </div>
</div>

The plunker is here: http://plnkr.co/edit/KkYgCDTWbWuorTOQISPo?p=preview


Solution

  • Just use request.selected in ng-model, since your request in HTML is referencing to each group, your selected will be a new key created in that array that will contain the selected one.

    ng-model= "request.selected"
    

    http://plnkr.co/edit/AaDl0idgtKmo5vLGdp7h