javascript - Angularjs 如何在 ng-repeat 中切换 div？

Question

我正在 angularjs 中工作，我需要在 ng-repeat 中切换 div，但它无法正常工作。 jQuery click 也无法解决此问题。单击 pregroupMem() anchor 标记后，我将调用此函数。和来自此函数的数据 ID，我将其用作 listdiv div 中的 membersList 。我需要在单击“custom-cn” anchor 标记时切换此 div。有多个列表，每个列表中都有多个 listdiv 。我需要在单击列表的 anchor 标记时切换特定的 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) {

    }); 

这是获取群组所有成员列表的js。我已根据您的更新了此内容

$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

您可以通过以下方式完成:

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>