angularjs - 使用 ng-show 在单击时展开嵌套列表

Question

My code - Plunker

我用了ng-repeat渲染我的嵌套 list .list以 folder 的方式构建始终显示
和 files在父 folder 时显示被点击。

问题是当我使用 ng-show显示 files我所有的folders是开放的
而不仅仅是点击的那个。

例如



我只想扩展列表中单击的记录，而不是所有记录。
我明白它为什么会发生，我正在寻找 Angular 中的方法来解决这个问题。
我怎样才能做到这一点？

我的代码

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

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;

    $scope.show = false;

    $scope.expand = function() {
       console.log("show")
       $scope.show = true;
    }
});


//services


webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '4',
            rate: 5,
            ip: '198.168.0.0',
            status: 'Approved',
            folder:[
                {
                    id: '1',
                    created: 1381583344653,
                    updated: '222212',
                    ratingID: '4',
                    rate: 5,
                    ip: '198.168.0.0',
                    status: 'Approved',
                },
                {
                    id: '111',
                    created: 1381583344653,
                    updated: '222212',
                    ratingID: '4',
                    rate: 5,
                    ip: '198.168.0.0',
                    status: 'Approved'
                }
              ]
        },
        {
            id: '2',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.1',
            status: 'Approved',
            folder:[
                {
                    id: '2',
                    created: 1382387322693,
                    updated: '222212',
                    ratingID: '3',
                    rate: 1,
                    ip: '198.168.0.1',
                    status: 'Approved',
                },
                {
                    id: '22',
                    created: 1382387322693,
                    updated: '222212',
                    ratingID: '3',
                    rate: 1,
                    ip: '198.168.0.1',
                    status: 'Approved'
                },
                {
                    id: '222',
                    created: 1382387327693,
                    updated: '222212',
                    ratingID: '3',
                    rate: 1,
                    ip: '198.168.0.1',
                    status: 'Approved'
                },
              ]
        },
        {
          file:[
              {
                id: '231',
                created: 1392387327693,
                updated: '222212',
                ratingID: '1',
                rate: 1,
                ip: '198.168.2.1',
                status: 'Approved'
              }
            ]
        }
    ];

    return votes;
}]);

HTML

    <div>
    <ul>
        <li class="created">
            <b>CREATED</b>
        </li>
        <li class="ip">
            <b>IP ADDRESS</b>
        </li>
    </ul>
    <ul ng-repeat="vote in votes" ng-click="expand()">

        <li class="created">
            {{vote.created|date}}
        </li>
        <li class="ip">
            {{vote.ip}}
        </li>


        <ul ng-show="show" ng-repeat="file in vote.folder">
          <li class="created">
              {{file.created|date}}
          </li>
          <li class="ip">
              {{file.ip}}
          </li>
        </ul>
        <ul class="file" ng-repeat="file in vote.file">
            <li class="created">
                {{file.created|date}}
            </li>
            <li class="ip">
               {{file.ip}}
            </li>
        </ul>

    </ul>

   </div>

Answer 1

您遇到的行为是正常的。在您的代码的当前状态中，只有一个 show 属性，并且您的所有 block 都绑定(bind)到此属性。将值从 false 修改为 true 将导致刷新所有 block 。 Show 属性设置为 true 一切都会被展开。

您需要做的是为每个投票添加一个属性显示并将显示/隐藏状态绑定(bind)到此属性。就像是 :

<ul ng-repeat="vote in votes" ng-click="expand(vote)">
  <li class="created">{{vote.created|date}}</li>
  <li class="ip">{{vote.ip}}</li>
  <li ng-show="vote.show">
    <ul>
      <li  ng-repeat="file in vote.folder">

您的扩展功能将如下所示:

$scope.expand = function(vote) {
   vote.show = true;
}

在此处查看修改后的 Plunker: http://plnkr.co/edit/gRtg4157Z3kDbNpejvFW?p=preview