如何使用 JSON 数据创建简单的 UI 树结构

Question

在 JSON 描述字段为空时，应创建一个根元素并将其置于列表顶部。 如果描述字段不为空，则描述名称应为创建的文件夹名称，标题应为文件夹的文档。 当再次出现相同的描述名称时，应将标题创建为相同文件夹描述的文档。

Root Doc 1（这是描述字段应该为空）

根文档2

文件夹 1（如果描述名称不为空，则创建为文件夹名称作为描述，并创建 doc1.1 作为标题）

文档 1.1

Doc 1.2（如果像文件夹 1 一样的描述名称再次出现，则该描述不应创建为文件夹，而是创建为像 Doc1.2 这样的文档作为匹配的描述）

文件夹 2

文档 2.1

文档 2.2

HMTL 文件：

<div ng-app="myApp" ng-controller="namesCtrl">

<ul ng-repeat="x in names">
<li ng-repeat="y in x.bookmarks" > 
    <span ng-if="y.description ==''">{{y.title}}</span>
    <span ng-if="y.description !==''">{{y.description}}
    <ul>
    <li>{{y.title}}</li>
    </ul>
    </span>
  </li>

</ul>

</div>

JS 文件：

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [{
    "description": "Testing File",
    "totalCount": 6,
    "bookmarks": [{
            "title": "Google",
            "link": "https://www.google.co.in",
            "description": "Health Care",
            "id": "3ee078ae-0f2e-48bf-9acc-535a753513d7",
            "tags": [
                "care", "child", "health"
            ],
            "createdDate": "Thu, 25 Feb 2016 08:23:01 -0600",
            "date": "Thu, 25 Feb 2016 09:32:53 -0600",
            "dateMillis": "1456414373315",
            "author": "test@gmail.com",
            "displayName": "Test Bookmark",
            "userid": "DIN2323",
            "contributorCount": 1,
            "isInternal": 0,
            "requiresHttpAuth": 0
        },

        {
            "title": "Test Construction1",
            "link": "http://google.com",
            "description": "",
            "id": "306dac71-a602-4e47-9b97-2cde7e72f76b",
            "tags": [
                "con", "concrete", "construction"
            ],
            "createdDate": "Thu, 25 Feb 2016 05:57:23 -0600",
            "date": "Thu, 25 Feb 2016 08:25:46 -0600",
            "dateMillis": "1456410346467",
            "author": "test@gmail.com",
            "displayName": "Test Bookmark",
            "userid": "DIN2323",
            "contributorCount": 1,
            "isInternal": 0,
            "requiresHttpAuth": 0
        },
        {
        "title": "Project EA TEST 1",
        "link": "http://sample.com",
        "description": "",
        "id": "5e19e314-ddaf-4041-a516-8fea14b1e90b",
        "tags": [
            "1.1.concrete", "1.construction"
        ],
        "createdDate": "Thu, 25 Feb 2016 00:21:17 -0600",
        "date": "Thu, 25 Feb 2016 06:17:39 -0600",
        "dateMillis": "1456402659864",
        "author": "test@gmail.com",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 2,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }, {
        "title": "Project EA TEST 3",
        "link": "http://sample.com",
        "description": "Construction",
        "id": "9c31fdb4-bd83-4679-8c6c-66ae93d5db61",
        "tags": [
            "construction-concrete"
        ],
        "createdDate": "Thu, 25 Feb 2016 00:18:17 -0600",
        "date": "Thu, 25 Feb 2016 00:18:17 -0600",
        "dateMillis": "1456381097393",
        "author": "test@gmail.com",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 1,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }, {
        "title": "Test Construction",
        "link": "https://google.com",
        "description": "Construction",
        "id": "46c20ef9-4455-4248-a21e-6299bd22ba0b",
        "tags": [
            "care", "health"
        ],
        "createdDate": "Wed, 24 Feb 2016 09:27:20 -0600",
        "date": "Thu, 25 Feb 2016 06:33:53 -0600",
        "dateMillis": "1456403633944",
        "author": "test@gmail.com",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 1,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }, {
        "title": "Test Connection",
        "link": "https://www.google.com",
        "description": "Education",
        "id": "6952bada-567b-47a5-a480-4c5394e694c2",
        "tags": [
            "manufacturing", "roofing"
        ],
        "createdDate": "Wed, 24 Feb 2016 09:23:52 -0600",
        "date": "Wed, 24 Feb 2016 09:23:52 -0600",
        "dateMillis": "1456327432494",
        "author": "test@gmail.com",
        "displayName": "Test Bookmark",
        "userid": "DIN2323",
        "contributorCount": 1,
        "isInternal": 0,
        "requiresHttpAuth": 0
    }
    ]

}];
});

输出：

Answer 1

获取唯一的描述名称，然后使用两个 ng-repeat 循环。 在外循环中使用唯一描述，在内循环中使用外循环值过滤所有书签。

你可以检查实现here

Answer 2

您可能希望查看https://github.com/angular-ui-tree/angular-ui-tree，而不是为该特定场景创建自定义逻辑。我认为它有你需要的一切。