I am using AnjularJS with Angular Material. I'm trying to display a group of checkboxes, and each group is displayed for each location I have. My problem is if a check a checkbox for the first location, the same checkbox for the other locations are checked. I'm unsure of how to have these nested checkboxes.
Here is my controller code
$scope.subBrandList = [
{sub_brand_id:"1", sub_brand_desc:"Brand 1"},
{sub_brand_id:"2", sub_brand_desc:"Brand 2"}
];
$scope.servicesProvidedList = [
{service_provided_id:"1", service_provided_desc:"Desc 1", sub_brand_id:"1"},
{service_provided_id:"2", service_provided_desc:"Desc 2", sub_brand_id:"1"}
];
$scope.dealerLocationList = [
{id:"1", dealer_location_name:"LOC 1"},
{id:"2", dealer_location_name:"LOC 2"}
]
$scope.servicesSelected = [];
$scope.serviceSelection = {
ids: {},
objects: []
};
$scope.toggle = function (item, list) {
var idx = list.indexOf(item);
if (idx > -1) list.splice(idx, 1);
else list.push(item);
};
$scope.exists = function (item, list) {
return list.indexOf(item) > -1;
};
Here is my HTML:
<ul>
<li ng-repeat="location in dealerLocationList">
<h1>{{location.dealer_location_name}}</h1>
<md-list>
<md-list-item ng-repeat="brand in subBrandList" style="padding-bottom:20px;">
<div style="padding-left:30px;">
<div flex ng-repeat="item in servicesProvidedList | filter : {sub_brand_id : brand.sub_brand_id} : true">
<md-checkbox class="md-primary" ng-checked="exists(item, servicesSelected)" ng-click="toggle(item, servicesSelected)" ng-model="serviceSelectionids.ids[item.service_provided_id]">
{{ item.service_provided_desc }}
</md-checkbox>
</div>
</div>
<md-divider md-inset ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</li>
</ul>
Aucun commentaire:
Enregistrer un commentaire