列出文件夹AngularJS

时间:2018-05-12 05:05:27

标签: angularjs angularjs-ng-repeat

我想重复一些文件夹,这是我的代码:HTML:

 <div class="container" ng-controller="miControlador">





      <li class="left-menu-list-submenu">
                <a class="left-menu-link" href="javascript: void(0);" ng-click="vm.getfolders();">
                    <i class="left-menu-link-icon fa fa-folder"></i>
                    Catalogs
                </a>
                <ul class="left-menu-list list-unstyled" style="margin-left:20px;" ng-repeat="fol in folders">
                    <li>
                        <a style="cursor:pointer;" ng-click="vm.more_folders();">{{fol}}</a>
                        <br />
                        <a style="cursor:default;color:black;" ng-repeat="more in more_folders">
                        <ul>
                          <li>{{more}}</li>
                        </ul>
                        </a>
                    </li>
                </ul>
            </li>


  </div>

JS:

  var vm = this;

    vm.getfolders = function(){
        $http({
            method: 'GET' ,
            url: 'link_folders.json',
        })
            .then(function successCallback(data) {
                console.log("folders");
                $scope.folders = data.data;

            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });
    };
    vm.getfolders();

    vm.more_folders = function(){
        $http({
            method: 'GET' ,
            url: 'more_folders.json',
        })
            .then(function successCallback(data) {
                console.log("more_folders");
                $scope.more_folders = data.data;

            }, function errorCallback(response) {
                console.log(response);
                console.log('error');
            });
    };

    vm.more_folders();

link_folders.json:

[
    "/visualizer/360", 
    "/visualizer/2D"
]

more_folders.json:

[
    "/visualizer/360/Eva", 
    "/visualizer/2D/Ferb", 
    "/visualizer/360/Andy", 
    "/visualizer/2D/John"
]

这是我的傻瓜:https://plnkr.co/edit/SW7fqSajpYtQCJdY6wZb?p=preview

我想要什么 - ng-repeat只有这个对象,哪个字符串就像上面的目录一样 -

/visualizer/2D

/visualizer/2D/Ferb
/visualizer/2D/John

提前感谢您的回答!

1 个答案:

答案 0 :(得分:1)

  

我想要什么 - ng-repeat只有这个对象,哪个字符串就像上面那样   目录,类似的东西 -

     

/可视/ 2D

     

/ visualizer / 2D / Ferb / visualizer / 2D / John

要像这样过滤数据,您只需要对第二次ng-repeat

进行过滤
ng-repeat="more in more_folders | filter:  fol ">

这将过滤然后打印与您的数据匹配的结果。

要了解有关过滤器的更多信息,请参阅this