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

发布时间：2020-12-17 09:27:10 所属栏目：安全来源：网络整理

导读：My code – Plunker 我用ng-repeat来渲染我的嵌套列表. 该列表以始终显示的文件夹的方式构建以及单击父文件夹时显示的文件. 问题是当我使用ng-show来显示所有文件夹都打开的文件而不是点击的. 例如我只希望列表中点击的记录被扩展,而不是所有的记录. 我明

My code – Plunker

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!