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邦薩爾邏輯看起來好像沒什麼問題，但我想避免一個更多的外部資源加載。 –

回答

相關問題