SentinelSixSpy SentinelSixSpy - 3 years ago 74
HTML Question

Use one md-switch to toggle a group of other md-switchs in HTML/JS

I am wanting to be able to toggle and untoggle entire group sections. When the group section is toggle off, I want the sections in the group toggle off as well or disabled. If the group section is toggled on, I want the sections toggled on as well or enabled. I added

ng-change
to the group toggle with the function
toggleLayerGroup
. I also have a
forEach
inside the function that goes through the feeds in the group. I am just not sure what to add to turn off or on the feeds in the group.

Answer Source

I finally got this to work properly. These are the changes I made.

HTML

<!--LAYER TOGGLE SWITCH-->
        <md-switch class="md-primary" ng-model="layerGroup.state" ng-change="toggleLayerGroup(layerGroup)" aria-label="{{layerGroup.displayName}} Toggle Switch"></md-switch>

<!--LAYER FEEDS-->
      <div  ng-repeat="feed in layerGroup.feeds" layout="row" layout-align="start center" style="padding: 0 16px;">
        <!--FEED NAME-->
        <p flex class="m2" style="color: #FFFFFF;" ng-style="{ 'opacity' : layerGroup.state ? '1' : '.3' }">{{feed.name}}</p>
        <!--FEED SWITCH-->
        <md-switch class="md-primary" ng-model="feed.layerState" ng-disabled="!layerGroup.state" ng-change="toggleLayer(feed)" aria-label="{{feed.name}} Toggle Switch"></md-switch>
      </div>

I added ng-style to show when the feeds are disabled. And ng-disabled to disable the switch when the layerGroupState is false.

Controller

// -- load feeds
  if (EcosystemService.currentUserOrg.feeds) {
    var feeds = EcosystemService.currentUserOrg.feeds;
    angular.forEach(feeds, function(feed, index) {
      var lg = $scope.layerGroups[feed.category];
      if(lg) {
        lg.feeds[feed.id] = feed;
        lg.feeds[feed.id].layerState = EcosystemService.currentUser.mapState.visibleLayers.indexOf(feed.id) >= 0;
        if (lg.feeds[feed.id].layerState) {
          lg.state = true;
        }
      }
    });
  }

$scope.toggleLayerGroup = function (layerGroup) {
  if (layerGroup.state) {
    angular.forEach(layerGroup.feeds, function (feed) {
      subscribeFeed(feed);

      if (EcosystemService.currentUser.mapState.visibleLayers.indexOf(feed.id) < 0) {
        EcosystemService.currentUser.mapState.visibleLayers.push(feed.id);
        $scope.saveState();
      }
      feed.layerState = true;
    });
  }
  else {
    angular.forEach(layerGroup.feeds, function (feed) {
      unsubscribeFeed(feed);

      var ndex = EcosystemService.currentUser.mapState.visibleLayers.indexOf(feed.id);
      if (ndex >= 0) {
        EcosystemService.currentUser.mapState.visibleLayers.splice(ndex, 1);
        $scope.saveState();
      }
      feed.layerState = false;
    });
  }
};

I added code to the place where the feeds are loaded and added code in toggleLayerGroup that will change the layerState dependending on the value of the layerGroup.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download