Question

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

根文档1 （这是描述字段应为空）

Root Doc2

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

Doc 1.1

Doc 1.2 （如果文件夹1的描述名称相同，则不应将描述创建为文件夹，并将其创建为Doc1.2文档，作为匹配的描述）

文件夹2

Doc 2.1

Doc 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，而不是为该特定方案创建自定义逻辑。我认为它拥有你需要的一切。

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

2 个答案: