CODEWITHSUNDEEP
angularjslistangular-material
Creative crypter
Creative crypter

Reputation: 1496

AngularJS - Material Menu

I am working at a new sidebar where you have some "parent list points" and their "children list point", like this.

Here's the JavaScript (codepen):

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

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav) {
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };

  $scope.toggle = function() {
    if ($scope.closed == 'closed') {
      $scope.closed = 'opened';
    } else {
      $scope.closed = 'closed';
    } 
  };
}]);

My current problem is that I don't know how to make only one list appear and not both when I click (in pure "angularJS").

How can I solve this logic problem?

Upvotes: 0

Views: 78

Answers (1)

masa
masa

Reputation: 2800

See http://codepen.io/anon/pen/OMMgEx

Key points:

Markup:

<md-list-item ng-click="toggle(1)" ng-class="closed[1]">

Javascript:

$scope.toggle = function(ndx) {
    if ($scope.closed[ndx] == 'closed') {
        $scope.closed[ndx] = 'opened';
    } else {
        $scope.closed[ndx] = 'closed';
    } 
};

Upvotes: 1

Related Questions