CODEWITHSUNDEEP
javascriptangularjs
angular_learner
angular_learner

Reputation: 671

Angular - toggle show/hide content not working

I have created a little show/hide content functionality in Angular, so when the menu item/tab is clicked it will show the desired content, which works fine.

Now, my problem is is that I need to initially (on page load) display the whole content of all tabs, so that all the tabs/menus are active.

And also, when clicking through the menu and if none of the tab/menu is active it should again show the whole content and make all the tabs active.

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

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

Working code: PLUNKR

Can anyone help please?

Upvotes: 0

Views: 257

Answers (2)

user3392550
user3392550

Reputation: 21

Try this: $scope.isGroupShown = function (group) { return $scope.shownGroup === group || $scope.shownGroup == null; };

So isGroupShown() will return true for every group while shownGroup is null

UPD: Didnt noticed you use isGroupShown function in item click handle. so you need another function, or just more complex expression in ng-show directive, like this:

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

PLNKR link

Upvotes: 1

Arno van Lieshout
Arno van Lieshout

Reputation: 1660

Update the controller to the sample below

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

Upvotes: 0

Related Questions