如何使用Angularjs

时间:2016-03-01 04:18:00

标签: angularjs

如果描述值为空,则应将该值创建为“根文档并放在列表顶部。

如果描述值不为空,则应将值创建为文件夹名称,并将标题创建为“文件夹名称”的根文档

如果描述值等于JSON数据中的其他描述值,则不应为它们创建仅为匹配描述值(文件夹名称)的根文档创建的文件夹名称。

如果描述值为(一个>两个),则应创建“两个”作为“一个”的子文件夹,并将“标题”值创建为子文件夹的根文档(两个)。

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是在“根文档”中创建的,如何添加“如果描述”值的逻辑是(一个>两个),就像“两个”应该创建为“一个”和“标题”的子文件夹应该在此脚本中将值创建为子文件夹的根文档(两个)。

所有根文档都使用相同的类,所有文件夹和子文件夹都使用相同的类

Working Link JS bin

Expecting Format

1 个答案:

答案 0 :(得分:1)

您可以查看angular-ui-tree