CODEWITHSUNDEEP
javascriptangularjscheckboxdrop-down-menu
noobprogrammer
noobprogrammer

Reputation: 345

How to get checkboxes to populate based on selected option in angular?

   <select class="form-control" ng-model="filterFormInputs.apps"
     ng-options="app.Application for app in d">
     <option value="" disabled selected>Select an Application</option
 </select>

I have the above code snippet somewhere in my index.html. And in my corresponding controller I have $scope.d = [{"Application": "app1", "details":[{"name":"name1"},{"name":"name2"},{"name":"name3"}]}, {"Application":"app2", "details":[{"name":"name4"},{"name":"name5"},{"name":"name6"}]}]

How do i make it such that when I select "app1" from the select form, I can populate a list of checkboxes with the corresponding "name" field" ? For example, if I select app1, I want three checkboxes with name1, name2, and name3 to appear. And if I select app2 from the select form, I want three checkboxes with app4, app5, and app6 to appear? using ng-repeat / ng-model

Upvotes: 1

Views: 1252

Answers (1)

dfsq
dfsq

Reputation: 193271

You need one more ngRepeat. For example like this:

<select class="form-control" ng-model="filterFormInputs.apps" ng-options="app.Application for app in d">
    <option value="" disabled selected>Select an Application</option> 
</select>

<label ng-repeat="checkbox in filterFormInputs.apps.details">
    <input type="checkbox" ng-model="checkbox.checked"> {{checkbox.name}}
</label>

You just need to decide to what model bind those checkboxes.

Demo: http://plnkr.co/edit/u9Bk7L9jLAxKzMbMjLmu?p=preview

Upvotes: 3

Related Questions