Question

我在Angular中创建了一个小的显示/隐藏内容功能，因此当单击菜单项/标签时，它将显示所需的内容，这样可以正常工作。

现在，我的问题是我需要最初（在页面加载时）显示所有选项卡的全部内容，以便所有选项卡/菜单都处于活动状态。

此外，当点击菜单时，如果没有任何标签/菜单处于活动状态，它应该再次显示整个内容并激活所有标签。

$scope.toggleGroup = function (group) {
        if ($scope.isGroupShown(group)) {
           $scope.shownGroup = null;
       } else {
           $scope.shownGroup = group;
        }
  };

  $scope.isGroupShown = function (group) {
    return $scope.shownGroup === group;
  };

工作代码：PLUNKR

有人可以帮忙吗？

Answer 1

试试这个： $ scope.isGroupShown = function（group）{ return $ scope.shownGroup === group || $ scope.shownGroup == null; };

因此isGroupShown（）将为每个组返回true，而shownGroup为null

UPD：没有注意到你在项目点击句柄中使用isGroupShown函数。所以你需要另一个函数，或者在ng-show指令中只需要更复杂的表达式，如下所示：

<div ng-repeat="content in availability" ng-show="isGroupShown(content.name) || shownGroup == null">
    {{content.name}} : {{content.issue}}
</div>

PLNKR link

Answer 2

将控制器更新为以下示例

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.showAllGroups = true;

  $scope.legend = [
      {"name":"critical"},
      {"name":"info"},
      {"name":"ok"},
      {"name":"unknown"},
      {"name":"warning"}
  ];


  $scope.availability = [
      {"name":"critical", "issue":"1111"},
      {"name":"info","issue":"2513"},
      {"name":"ok","issue":"3569"},
      {"name":"unknown","issue":"1245"},
      {"name":"warning","issue":"4598"},
      {"name":"critical", "issue":"7899"},
      {"name":"info","issue":"3265"},
      {"name":"ok","issue":"7415"},
      {"name":"unknown","issue":"0213"},
      {"name":"warning","issue":"3333"}
  ];

  $scope.toggleGroup = function (group) {
        $scope.showAllGroups = false;
        if ($scope.isGroupShown(group)) {
           $scope.showAllGroups = true;
           $scope.shownGroup = null;
       } else {
           $scope.shownGroup = group;
        }
  };

  $scope.isGroupShown = function (group) {
    if ($scope.showAllGroups)
      return true;
    return $scope.shownGroup === group;
  };
});

角度 - 切换显示/隐藏内容不起作用

2 个答案: