Question

我希望能够切换和解开整个组部分。切换组部分时，我希望组中的部分也可以关闭或禁用。如果打开组部分，我希望部分也可以打开或启用。我将ng-change添加到组中，并使用函数toggleLayerGroup进行切换。我在函数内部还有一个forEach，它通过组中的feed。我只是不确定添加什么来关闭或关闭组中的提要。

控制器

这是加载Feed的地方。

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

Answer 1

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

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以显示Feed被禁用的时间。并ng-disabled在layerGroupState为假时禁用切换。

控制器

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

我将代码添加到加载Feed的位置，并在toggleLayerGroup中添加了代码，这些代码将更改取决于layerGroup值的layerState。

Answer 2

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

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

使用一个md-switch在HTML / JS中切换一组其他md-switch

2 个答案: