NG重复

内创建父DIV我从JSON字符串25个项目。每个项目都带有一个名为“InRowPlcement”的键，值分配为“0”或“1”或“2”等。NG重复

{"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-重复

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

在此先感谢您的帮助。

SOLUTION UPDATE：

基于由@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;

来源

2016-05-18 Sudip Pal

为什么唯独没有改变的数据结构视图层？迭代并在控制器中构建所需的内容。 –

@vp_arth，你能否给我一些细节，我只是想插入“

" in a continuous repeat statement based on a key value which is available in the array. Just not able to fix the expression, how to check. using ng-if or something else. –

inserting parts of DOM like this too smells. Just think angular. There is a data and there is directive ('ng-repeat') to represent this data. You can write your own directive with custom behavior. You shouldn't manipulate with raw HTML parts (like '

'） - 每次尝试时都会有一些小猫死亡 –

这可以用一串过滤器来完成，但更好的只是准备在控制器视图层的数据结构。

在你的控制器：

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>

来源

2016-05-18 04:53:54

感谢@vp_arth，我得到了渴望的结果。我要更新的实际控制代码鉴于输出。 –

你可以在DOM使用ng-if添加表达式击穿这几项。

<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

来源

2016-05-18 04:53:52 Sajal

我们怎么知道InRowPlacement会是多少？ –

它说，在JSON 25个项目，每行有'InRowPlacements'价值。 – Sajal

感谢@开发多功能一体机，这是一个有效的逻辑，但我不希望添加25毫微克，如果在我看来，一天的JSON节点可能会增加。 –

我已经写了下面的代码按照您的要求，并认为这是可行的按照您的要求。

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

来源

2016-05-18 05:31:48

感谢@Suneet邦萨尔逻辑看起来好像没什么问题，但我想避免一个更多的外部资源加载。 –

回答

相关问题