在 ng-repeat 中创建父 div

Question

我有 25 个项目来自 JSON 字符串。每个项目都有一个名为 "InRowPlcement" 的键，值被分配为“0”或“1”或“2”等等。

{"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}

目的是，将“0”"InRowPlacement"项放在第一行，“1”放在第二行，“2”放在第三行，依此类推。每行中的项目数可能不同。一行中可能有 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

您可以使用 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>

工作的 Plunker：https://plnkr.co/edit/vFR6NUIu6Uyl8XSOTiax?p=preview

Answer 2

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

在你的控制器中：

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 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

Creating parent div inside ng-repeat

angularjs

ng-repeat