Search code examples
angularjsangularjs-ng-repeatqangularjs-ng-click

activate ng-repeat using ng-click

So basically I created this menu using ng-repeat where it displays a field of objects inside an array. Then when I click on one of these displayed fields I want to make another ng-repeat that will push the other ones below. I only want to activate this second ng-repeat on click and also undo if the user clicks again. Meaning, ng-repeat will only occur after the user clicks on a button.

Any ideas how I should execute this?

<div ng-repeat="collection in library" ng-click="setCollection(collection)">
          <li class="list-group-item">{{collection.Collection}}</li>
</div>

And here I have some code from the JS file

$scope.library = [
            {
                Collection: "Harry Potter",
                value: false,
                books: [
                    {
                        book: "Sorcerer Stone",
                        value: false                        
                    },
                    {
                        book: "Goblet of Fire",
                        value: false,
                    }
                ]
            },
            {
                Collection: "LOTR",
                value: false,
                books: [
                    {
                        book: "Two Towers",
                        value: false                        
                    },
                    {
                        book: "Return of the King",
                        value: false,
                    }
                ]
            }
        ];

        $scope.setCollection = function(collection){
            collection.value = !collection.value;
        };

So if the user clicks on the collection it ng-repeats all the books right beneath the collection name. If clicks again on the same collection all of them hide again. If clicks on a book after clicking on the collection I want it to set the value to !value. Setting the value to true or false must work on collections and on books.

Thank you :)

Solution

  • I have created a demo just like you want, you only need to change a little bit of code.

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

function MyCtrl($scope) {
  $scope.title = 'Welcome varun';
  $scope.mainMenu = [{
    title: 'A',
    subMenu: ['A1', 'A2'],
    subMenuDisplay: false
  }, {
    title: 'B',
    subMenu: ['B1', 'B2', 'B3'],
    subMenuDisplay: false
  }, {
    title: 'C',
    subMenu: ['C1', 'C2'],
    subMenuDisplay: false
  }];

  $scope.toggle = function(menu) {
    menu.subMenuDisplay = !menu.subMenuDisplay;
  };
}
    .menu {
  min-width: 50px;
  min-height: 30px;
  background: grey;
  border: 2px solid black;
  cursor:pointer;
}
.subMenu {
    min-width: 50px;
    min-height: 30px;
    background: magenta;
    border: 2px solid black;
    cursor:auto;
  }
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp" ng-controller="MyCtrl">
  <div>
    {{title}}
  </div>
  <div>
    <div class='menu' ng-repeat='menu in mainMenu' ng-click='toggle(menu)'>
      {{menu.title}}
      <div class='subMenu' ng-repeat='sub in menu.subMenu' ng-show='menu.subMenuDisplay' ng-click='$event.stopPropagation()'>
        {{sub}}
      </div>
    </div>
  </div>

</body>