mercredi 6 janvier 2016

AngularJS Material checkboxes in nested loop

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