angularjs – 使用ng-show在点击中扩展嵌套列表

我用ng-repeat来渲染我的嵌套列表.
该列表以始终显示的文件夹的方式构建
以及单击父文件夹时显示的文件.

问题是当我使用ng-show来显示所有文件夹都打开的文件
而不是点击的.

例如

我只希望列表中点击的记录被扩展,而不是所有的记录.
我明白为什么会发生,我正在寻找一个方法来解决这个问题.
我该如何实现呢？

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',},{
                    id: '111',status: 'Approved'
                }
              ]
        },{
            id: '2',created: 1382387322693,ratingID: '3',rate: 1,ip: '198.168.0.1',folder:[
                {
                    id: '2',{
                    id: '22',status: 'Approved'
                },{
                    id: '222',created: 1382387327693,]
        },{
          file:[
              {
                id: '231',created: 1392387327693,ratingID: '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>

你所经历的行为是正常的.在你的代码的当前状态中,只有一个显示属性,所有的块都绑定到这个属性.将值从false修改为true将导致刷新所有块.显示属性设置为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

原文链接：https://www.f2er.com/angularjs/140611.html

angularjs – 使用ng-show在点击中扩展嵌套列表

猜你在找的Angularjs相关文章