樹視圖篩選器表AngularJS

我嘗試鑑於這樣的事情：樹視圖篩選器表AngularJS

/big_big_package 
/door 
    /cooler 
    /chair

HTML：

<div ng-repeat="i in split"> 
    <div ng-repeat="s in i"> 
     <a ng-click="Paths(s)" style="cursor:pointer;" class="left-menu-link"> 
      {{s}} 
     </a> 
    </div> 
</div>

JSON：

[ 
    "/big_big_package", 
    "/door/cooler", 
    "/door/chair", 
    "/door" 
]

Plunker：http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

來源

2017-09-09 bafix2203

什麼是你的問題？ –

@WilliamHampshire我想看看這樣的東西：（在問題的頂部） – bafix2203

而不是：/ big_big_package /門/冷卻器 /門/椅子 /門 – bafix2203

我試過你的問題。這是我的方法，

排序數組，以便我們將按順序獲取文件夾結構。
循環遍歷數組，同時檢查前一個元素是否包含在當前元素中。
如果找到該元素，則添加填充。

請檢查我的Plunkr是否爲我的方法的GIST。這只是一個基本的例子，它可以在單個層面上工作，但您需要調整此功能以使其在多層面上工作。

Plunkr Demo

JS：

vm.getid = function(){ 
     $http({ 
      method: 'GET', 
      url: 'api.json', 
     }) 
      .then(function successCallback(data) { 
       var data = data.data; 
       data.sort(); 
       var prev = 0; 
       angular.forEach(data, function(val, index){ 
        var padding = '0px'; 
        var skip = true; 
        var repl = ""; 
        console.log(val); 
        console.log(prev); 
        console.log(val.indexOf(prev)>-1); 
        if(val.indexOf(prev)>-1 && index !== 0){ 
        padding = '20px'; 
        data[index] = {padding: padding, value: val.replace(prev, "")}; 
        skip = false; 
        }else{ 
        data[index] = {padding: '0px', value: val}; 
        } 
        if(skip){ 
        prev = data[index].value; 
        } 
       }); 
       $scope.id = data; 
       console.log(data); 
      }, function errorCallback(response) { 
       console.log(response); 
       console.log('error'); 
      }); 

    };

HTML：

<li ng-repeat="i in id"> 
     <a ng-style="{ 'padding-left' : i.padding}" ng-click="Paths(i)" style="cursor:pointer;" class="left-menu-link"> 
      {{i.value}} 
     </a> 
    </li>

來源

2017-09-09 12:59:06

的一種方式可能是通過/分割字符串，然後建立這些項目樹只有一個條目與所有這些項目有兩次（或更多）條目，並且第一個條目匹配的位置。最後，消除被放置在樹中的項目：

var tree = data.data.map(function(d) { 
    return d.split('/').slice(1) 
}) 
tree.forEach(function(t) { 
    if (t.length == 1) t.tree = tree.filter(function(f) { 
    if (f != t && f[0] == t[0]) { 
     f.processed = true; 
     f.shift(); 
     return f 
    } 
    }) 
}) 
tree = tree.filter(function(t) { 
    if (!t.processed) return t 
}) 
$scope.id = tree;

爲了讓樹一樣縮進使用嵌套<ul>的

<ul> 
<li ng-repeat="i in id"> 
    {{ i[0] }} 
    <ul ng-if="i.tree"> 
    <li ng-repeat="t in i.tree"> 
     {{ t[0] }} 
    </li> 
    </ul> 
    </li> 
</ul>

更新plunkr http://plnkr.co/edit/NDLqM7Yo2w9oJUsmxi37?p=preview

來源

2017-09-09 15:37:14 davidkonrad

樹視圖篩選器表AngularJS

回答

相關問題