10

我的代码 - Plunker

我曾经ng-repeat渲染我的嵌套list. 以始终显示和单击父级时显示list的方式构建。folderfilesfolder

问题是当我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>
4

2 回答 2

22

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

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

<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

于 2013-09-12T09:24:56.553 回答
1

建立在 Nics 答案之上，这稍微简单一些：

<ul ng-repeat="vote in votes" ng-click="expand = !expand">
  <li class="created">{{vote.created|date}}</li>
  <li class="ip">{{vote.ip}}</li>
  <li ng-show="expand>
    <ul>
      <li  ng-repeat="file in vote.folder">
于 2016-11-17T14:27:34.953 回答