2016-03-01 154 views
1

如果描述值爲空,則應將該值創建爲「根文檔並放置到列表頂部。如何使用Angularjs創建樹結構的HTML模板

如果描述值不爲空值應爲文件夾名稱和標題創建要創建爲「文件夾名稱」

的根文件如果描述值等於在JSON數據的其他說明價值,他們值不應創建爲僅爲匹配描述值(文件夾名稱)的根文檔創建的文件夾名稱。

如果說明值是(1> 2),那麼應該將「two」創建爲「one」的子文件夾,並且應將「title」值創建爲子文件夾的根文檔(兩個)。

HTML:

<div ng-controller="TodoCrtl"> 
     <ul> 
     <li ng-repeat="description in getDescriptions()" style="color:red;"> 
      {{description}} 
      <ul> 
      <li ng-repeat="bookmark in flaternedBookmarks|filter:{description:description}" style="color:blue;"> 
       {{bookmark.title}} 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </div> 

JS文件:

function TodoCrtl($scope) { 

    $scope.names = [{ 
    "description": "Testing File", 
    "totalCount": 6, 
    "bookmarks": 
    [ 
     { 
      "title": "Google", 

      "description": "Health Care", 

     }, 

     { 
      "title": "Test Construction1", 

      "description": "", 

     }, 



     { 
     "title": "one 1.1", 

     "description": "one", 

     }, 

     { 
     "title": "one 1.2", 

     "description": "one", 

     }, 

     { 
     "title": "Test Connection", 

     "description": "Education", 

     } , 
     { 
     "title": "Project EA TEST 1", 

     "description": "", 

     }, 

     { 
     "title": "one 2.1", 

     "description": "one > two", 

     }, 

     { 
     "title": "one 2.2", 

     "description": "one > two", 

     } 
    ] 

}]; 



    $scope.getDescriptions=function(){ 
    var descriptions=[]; 
    $scope.flaternedBookmarks=[]; 
    var arr= $scope.names; 
    angular.forEach(arr,function(ai){ 
    angular.forEach(ai.bookmarks,function(v){ 
     if(v.description.trim()==='') 
     { 

      descriptions.splice(0,0,v.title.trim()); 
     }else 
      { 

      descriptions.splice(descriptions.length-1,0,v.description.trim()); 
      } 
     $scope.flaternedBookmarks.push(v); 
    }); 
    }); 


    return descriptions.filter (function (v, i, a) { return a.indexOf (v) == i; }); 
    }; 

現在的問題是空的UI在「根文件以及如何創建添加的。如果描述值邏輯(1> 2)應該創建爲「two」的子文件夾,並且應該在此腳本中創建「title」值作爲子文件夾的根文檔(兩個)。

所有根文檔中使用相同的類和所有的文件夾和子文件夾使用同一類

Working Link JS bin

Expecting Format

回答