Angularjs ng-repeatでdivを切り替えるにはどうすればいいですか？

Question

私はangularjsで働いています。私はng-repeatでdivをトグルする必要がありますが、うまく動作しません。 jQueryのクリックもこれで動作していません。 pregroupMem()アンカータグをクリックすると、私はこの関数を呼び出しています。データIDはこの関数から来て、listdiv divにはmembersListとしています。 "custom-cn"アンカータグのクリックでこのdivを切り替える必要があります。複数のリストがあり、これらのリストのそれぞれには複数のlistdivsがあります。私はリストのアンカータグのクリックに特定のdivを切り替える必要があります。

This is my js to get all groups of members. 

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

    grs.init = init; 
    function init() 
    { 
     getMyData();  
    } 
    $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) { 

    }); 

これはあなたが次のようにそれを行うことができます

$scope.open = -1; 
$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; 

      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; 


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

    } 

<ul> 
<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> 

      </div> 
      </li> 
     </ul> 
    </div> 

</li> 
</ul> 

Answer 1

に応じて更新しているgroup.Iのすべてのメンバーのリストを取得するためのJSです：

angular 
 
    .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) { 
 
     e.preventDefault(); 
 
     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}} 
 
     </ul> 
 
     </div> 
 

 
    </li> 
 
    </ul> 
 
</div>

を