Web Dev Web Dev - 1 year ago 80
Javascript Question

Angularjs How to Toggle div's in ng-repeat?

I am working in angularjs and I need to toggle div in

but its not working fine. jQuery click is also not working on this. On click of
anchor tag I am calling this function. and data id coming from this function and I am using this as
div. I need to toggle this div on click of "custom-cn" anchor tag.There are multiple lists and in each of these lists there are there multiple
. I need to toggle the particular div on the click of anchor tag of list.

This is my js to get all groups of members.

localStorageService.set('grpOpen', grps.openGroups);
localStorageService.bind($scope, 'grpOpen');

grs.init = init;
function init()
$scope.data = null;

DataService.getMyData().then(function successCallback(response)
$scope.data = response.data.results;
$scope.grpOpen.length = 0;
$scope.grpOpen.push({'data': response.data.results});
},function errorCallback(response) {


This is js to get all members list of a group.I have updated this according to your

$scope.pregroupMem = function(index,id,e){

$rootScope.membersList = '';
// $rootScope.membersList.length = 0;
$scope.loading= true;

DataService.getGrpMem(id).success(function (data) {
$rootScope.membersList = data.results;
$scope.data[index].shown = !$scope.data[index].shown;

}).catch(function (err) {
// Log error somehow.
.finally(function () {
// Hide loading spinner whether our call succeeded or failed.
$scope.loading = false;


<li ng-repeat="groupsw in grpOpen[0].data track by $index">
<a ng-click="pregroupMem($index,groupsw.grpId,$event)" class="custom-cn" href="javascript:;">{{ groupsw.grpName }}</a>

<div class="listdiv">
<ul class="userlist">
<li ng-repeat="mymembers in membersList">
<a class="add_user" href="javascript:;"><i class="fa fa-user-plus"></i></a>
<div class="userlist">
<span class="usnermalissval" ng-if="mymembers.Name != null">{{mymembers.Name}}</span>



Answer Source

You can do it in following way:

  .module('app', [])
  .controller('MyController', function($scope) {
    $scope.data = [
      {grpId: 1, grpName: 'One'},
      {grpId: 2, grpName: 'Two'},
      {grpId: 3, grpName: 'Three'},
      {grpId: 4, grpName: 'Four'},
      {grpId: 5, grpName: 'Five'}
    $scope.open = -1;
    $scope.pregroupMem = function(index, id, e) {
      if( $scope.open >= 0 && $scope.data[$scope.open] ){
        $scope.data[$scope.open].shown = !$scope.data[$scope.open].shown;
      if( $scope.open !== index ){
        $scope.data[index].shown = !$scope.data[index].shown;
      $scope.open = index;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <ul ng-controller="MyController">
    <li ng-repeat="groupsw in data">
      <a ng-click="pregroupMem($index, groupsw.grpId, $event)" class="custom-cn" href="javascript:;">{{ groupsw.grpName }}</a>

      <div class="listdiv" ng-show="groupsw.shown">
        <ul class="userlist">
          This is a child div of grpId: {{groupsw.grpId}}


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download