Question

我使用ng-repeat来渲染我的嵌套list。 list以folder的方式构建，始终显示单击父files时显示的folder和<{p}}。

问题是，当我使用ng-show显示files时，folders所有Angular都已打开而不是点击的那个。

e.g

E.g

我希望只展开列表中点击的记录，而不是所有记录。我明白为什么会这样，我正在寻找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; }]);解决这个问题的方法。我怎样才能做到这一点？

我的代码

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

HTML

{{1}}

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

Answer 2

在Nics答案的基础上，这稍微简单一些：

[ngModel]

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

2 个答案: