Question

我有来自JSON字符串的25个项目。每个项目都带有一个名为＆＃34; InRowPlcement＆＃34;并将值指定为＆＃34; 0＆＃34;或＆＃34; 1＆＃34;或＆＃34; 2＆＃34;等等。

{"ItemID":"516","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
{"ItemID":"514","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
{"ItemID":"546","ItemName":"Underworld Lives","InRowPlcement":0},
{"ItemID":"527","ItemName":"In a holiday beach","InRowPlcement":1},
{"ItemID":"542","ItemName":"Underworld Lives","InRowPlcement":1},
{"ItemID":"525","ItemName":"Lake somewhere","InRowPlcement":1},
{"ItemID":"540","ItemName":"Coral Structure at Andaman","InRowPlcement":1},
{"ItemID":"569","ItemName":"Ice Rock, Ireland","InRowPlcement":2}

目的是，放置＆＃34; 0＆＃34; ＆＃34; InRowPlacement＆＃34;第一行中的项目，＆＃34; 1＆＃34;在第二行，＆＃34; 2＆＃34;在第三排等等。每行的项目数可能不同。单行可能从1到5。

我开始了ng-repeat

<div class="ROW" ng-repeat="item in items">
    <div class="COLUMN">{{item.ItemName}}<div>
</div>

我需要结果应该像

    <div class="ROW">
        <div class="COLUMN">Newzeland Lake Tysonno<div>
        <div class="COLUMN">Newzeland Lake Tysonno<div>
        <div class="COLUMN">Underworld Lives<div>
    </div>
    <div class="ROW">
        <div class="COLUMN">In a holiday beach<div>
        <div class="COLUMN">Underworld Lives<div>
        <div class="COLUMN">Lake somewhere<div>
        <div class="COLUMN">Coral Structure at Andaman<div>
    </div>

提前感谢您的帮助。

解决方案更新：

根据@vp_arth提供的逻辑，这是实际的代码，对我有用

var view_rows = {};
angular.forEach(response.data, function(InRowPlcement,index){
    if (!view_rows[response.data[index].InRowPlcement]) view_rows[response.data[index].InRowPlcement] = [];
    view_rows[response.data[index].InRowPlcement].push(response.data[index]);

});
groups = view_rows;

Answer 1

这可以通过一堆过滤器完成，但更好的是为控制器中的视图层准备数据结构。

在您的控制器中：

let data = [
{"ItemID":"516","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
{"ItemID":"514","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
{"ItemID":"546","ItemName":"Underworld Lives","InRowPlcement":0},
{"ItemID":"527","ItemName":"In a holiday beach","InRowPlcement":1},
{"ItemID":"542","ItemName":"Underworld Lives","InRowPlcement":1},
{"ItemID":"525","ItemName":"Lake somewhere","InRowPlcement":1},
{"ItemID":"540","ItemName":"Coral Structure at Andaman","InRowPlcement":1},
{"ItemID":"569","ItemName":"Ice Rock, Ireland","InRowPlcement":2}
];
let view_rows = {};
data.forEach(row => {
  if (!view_rows[row.InRowPlcment]) view_rows[row.InRowPlcment] = [];
  view_rows[row.InRowPlcment].push(row);
});
$scope.groups = view_rows;

然后，在视图中：

<div class="ROW" ng-repeat="(i, rows) in groups">
    <div class="COLUMN" ng-repeat="row in rows">{{row.ItemName}}<div>
</div>

Answer 2

您可以使用ng-if在DOM中添加表达式来细分项目。

<div class="ROW" ng-repeat="item in items">
   <div ng-if ="item.InRowPlcement == 0">
     <div class="COLUMN">{{item.ItemName}}<div>
   </div>
   <div ng-if ="item.InRowPlcement == 1">
     <div class="COLUMN">{{item.ItemName}}<div>
   </div>
   <div ng-if ="item.InRowPlcement == 2">
     <div class="COLUMN">{{item.ItemName}}<div>
   </div>
</div>

Working Plunker：https://plnkr.co/edit/vFR6NUIu6Uyl8XSOTiax?p=preview

Answer 3

我已根据您的要求编写了以下代码，并相信它可以按照您的要求运行。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
        <script>
            var mainModule = angular.module('mainModule', ['angular.filter']);
            mainModule.controller('mainCntrl', function($scope) {
                $scope.items = [
                    {"ItemID":"516","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
                    {"ItemID":"514","ItemName":"Newzeland Lake Tysonno","InRowPlcement":0},
                    {"ItemID":"546","ItemName":"Underworld Lives","InRowPlcement":0},
                    {"ItemID":"527","ItemName":"In a holiday beach","InRowPlcement":1},
                    {"ItemID":"542","ItemName":"Underworld Lives","InRowPlcement":1},
                    {"ItemID":"525","ItemName":"Lake somewhere","InRowPlcement":1},
                    {"ItemID":"540","ItemName":"Coral Structure at Andaman","InRowPlcement":1},
                    {"ItemID":"569","ItemName":"Ice Rock, Ireland","InRowPlcement":2}
                ];
            });
        </script>
    </head>
    <body ng-app="mainModule">
        <div ng-controller="mainCntrl">
            <ul ng-repeat="(key, value) in items | groupBy: 'InRowPlcement'">
              <div class="ROW">
                <div class="COLUMN" ng-repeat="item in value">
                    {{ item.ItemName }} 
                </li>
              </div>
            </ul>
        </div>
    </body>
</html>

在ng-repeat中创建父div

3 个答案: