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

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 = 功能（组）{ 返回 $scope.shownGroup === 组 || $scope.shownGroup == null; };

所以 isGroupShown() 将为每个组返回 true，而 shownGroup 为空

更新： 没有注意到您在项目单击句柄中使用 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;
  };
});