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

Question

我的代码 - 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属性,并且所有块都绑定到此属性.将值从false修改为true将导致刷新所有块.显示属性设置为true将展开所有内容.

您需要做的是为每个投票添加一个属性show并将show/hide状态绑定到此属性.就像是 :

<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