Question

我正在尝试迭代通过REST服务接收的独特“模块”。有多个href与单个模块相关联。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script type="text/javascript">

        var moduleServiceUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('Pages')/Items?$select=ID,Title,FileRef,Modules";
        var appVar = angular.module('listApp', []);

        appVar.controller('controller1', function ($scope, $http) {
            $http({
                method: 'GET',
                url: moduleServiceUrl,
                headers: { "Accept": "application/json;odata=verbose" }
            }).success(function (data, status, headers, config) {
                $scope.items = data.d.results;

            });
        })
    </script>

</head>
<body>
    <hr />
    <div ng-app="listApp">
        <div id="App1" ng-controller="controller1">
            <div ng-repeat="item in items" ng-if="item.Modules">
                <b><p>{{item.Modules}}</p></b>
                <p class="kbRelatedArticle" style="padding-left:10px"><a href="{{item.FileRef}}">{{item.Title}}</a></p>
            </div>

        </div>
    </div>

</body>
</html>

Here is what the current output looks like

我的目标是将所有链接放在同一模块标题下，而不是重复模块标题。

我最初的想法是有一个嵌套的ng-repeat，其中外部ng-repeat将遍历唯一模块，然后内部将生成与该模块相关的链接。

Answer 1

您可以创建一个以Modules为键的对象，并创建一个项目数组作为值

$scope.modules = data.d.results.reduce((modules, item) => {
    if (item.Modules) {
        if (Array.isArray(modules[item.Modules])) {
            modules[item.Modules].push(item);
        } else {
            modules[item.Modules] = [item];
        }
    }
    return modules;
}, Object.create(null));

或者，如果你不反对使用像Lodash这样的东西

$scope.modules = _.groupBy(data.d.results, 'Modules');

然后您的HTML可以使用嵌套转发器

<div ng-repeat="(module, items) in modules">
    <p><strong>{{module}}</strong></p>
    <p ng-repeat="item in items" style="padding-left:10px;">
        <a ng-href="{{item.FileRef}}">{{item.Title}}</a>
    </p>
</div>

Angular - 循环REST数据中的唯一项

1 个答案: