使用一个md开关来切换HTML/JS中的一组其他md开关

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

本文关键字：md 开关 JS 其他 一组 一个 HTML      更新时间：2023-09-26

我希望能够切换和取消切换整个组的部分。当组部分被关闭时，我希望组中的部分也被关闭或被禁用。如果组部分被打开，我希望这些部分也被打开或启用。我使用函数toggleLayerGroup将ng-change添加到组切换中。我在函数中还有一个forEach，它遍历组中的提要。我只是不确定该添加什么来关闭或打开群中的订阅源。

控制器

这是加载提要的地方。

// -- load feeds
  if (Service.currentUser.feeds) {
    var feeds = Service.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 = Service.currentUser.mapState.visibleLayers.indexOf(feed.id) >= 0;
        if (lg.feeds[feed.id].layerState) {
          lg.state = true;
        }
      }
    });
  }

这就是开关被击中的地方。

$scope.layerState = false;
$scope.layerGroup = false;
$scope.toggleLayer = function (layerState, feed) {
  if (layerState) {
    subscribeFeed(feed);
    if (Service.currentUser.mapState.visibleLayers.indexOf(feed.id) < 0) {
      Service.currentUser.mapState.visibleLayers.push(feed.id);
      $scope.saveState();
    }
  }
  else {
    unsubscribeFeed(feed);
    var index = Service.currentUser.mapState.visibleLayers.indexOf(feed.id);
    if (index >= 0) {
      Service.currentUser.mapState.visibleLayers.splice(index, 1);
      $scope.saveState();
    }
  }
};
$scope.toggleLayerGroup = function (layerGroupState, layerGroup) {
  if (!layerGroupState) {
    angular.forEach(layerGroup.feeds, function (feed, index) {
      subscribeFeed(feed);
      $scope.saveState();
    });
  }
  else {
    angular.forEach(layerGroup.feeds, function (feed, index) {
      unsubscribeFeed(feed);
      $scope.saveState();
    });
  }
};
function subscribeFeed(feed) {
  switch (feed.category) {
    case 'people':
    case 'assets':
      feed._markerColl = {};
      feed.processEntity = processEntity;
      feed.clearFeed = clearFeed;
      break;
    case 'places':
      feed._placeColl = {};
      feed.processEntity = processEntity;
      feed.clearFeed = clearFeed;
      break;
  }
  feed.icons = Service.currentUser.feedIcons;
  feed.off = NextService.on(feed.id, function (data) {
    feed.processEntity(data);
  });
function unsubscribeFeed(feed) {
  feed.off();
  delete feed.off;
  NextService.emit('unsubscribe', {id: feed.id});
  feed.clearFeed();
}

我终于让它正常工作了。这些是我所做的改变。

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>

我添加了ng-style来显示何时禁用提要。当layerGroupState为假时，ng-disabled禁用开关。

控制器

// -- 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;
    });
  }
};

我在加载提要的地方添加了代码，并在toggleLayerGroup中添加了将根据layerGroup的值更改layerState的代码。

您的toggleLayerGroup函数应该在layerGroup.feeds上运行一个循环，其中将包含切换的状态信息。对于layerGroup.feed的每个值，它应该将其传递给toggleLayer函数，该函数将管理订阅和查看状态。

在执行此操作时，只需找到toggleLayerGroup的状态，并将其传递给组控制视图行为的每个提要值。

相关文章：