需要使用ng-repeat（兩列上的組）顯示數據

數據庫提供以下JSON字符串。需要使用ng-repeat（兩列上的組）顯示數據

$scope.items = [ 
    {"Name":"Michael","Region":"Canada","Subject":"Chemistry","Action":"Email"}, 
    {"Name":"Michael","Region":"Canada","Subject":"Biology","Action":"Call"}, 
    {"Name":"Kristen","Region":"USA","Subject":"Chemistry","Action":"Skype"}, 
    {"Name":"Kristen","Region":"USA","Subject":"Physics","Action":"Email"}, 
    {"Name":"Kristen","Region":"USA","Subject":"Chemistry","Action":"Call"}, 
    {"Name":"Kristen","Region":"Europe","Subject":"Chemistry","Action":"Call"}, 
    {"Name":"Kristen","Region":"Europe","Subject":"Biology","Action":"Call"} 
];

目前顯示的數據如下圖所示：（使用ng-repeat）

 
Name   Region   Subject   Action 
Michael  Canada   Chemistry  Email 
Michael  Canada   Biology   Call 
Kristen  USA   Chemistry  Skype 
Kristen  USA   Physics   Email 
Kristen  USA   Chemistry  Call 
Kristen  Europe   Chemistry  Call 
Kristen  Europe   Biology   Call

預期結果（表格式）

 
Name   Region  Subject     Action   
Michael  Canada  Chemistry,Biology   Email,Call 
Kristen  USA   Chemistry,Physics   Skype,Email,Call 
Kristen  Europe  Chemistry,Biology   Call

不明白如何使用ng-repeat得到預期的結果（如圖所示以上）。

來源

2016-09-29 user3172224

嗨GSerg，感謝格式化我的問題。我可以知道你是怎麼做到的嗎？你在哪裏得到「編輯」鏈接？ – user3172224

[Angular ng-repeat有條件包裝元素（ng-repeat中的組項）]的重複項可能的副本（http://stackoverflow.com/questions/23493063/angular-ng-repeat-conditional-wrap-items-in- ng-repeat） – paulwasit

你不能單獨使用ng-repeat來做到這一點。您需要首先自己映射這些數據，以便將每個人的主題和操作結合起來 – charlietfl

你不能簡單地使用ng-repeat將能夠做這樣複雜的分組，但通過格式化您的數據，然後再發送到ng-repeat我們可以實現上述結果。

添加以下angular.forEach在JS準備數據做在HTML水平

$scope.newList = []; 
     var newItemsList = []; 
     var nameList = []; 
     var regList = []; 
     angular.forEach($scope.items, function(val, key) { 
      var stud = val; 
      var newObj = {}; 

      newObj.Name = stud.Name; 
      newObj.Region = stud.Region; 
      newObj.Subject = []; 
      newObj.Action = []; 
      if (nameList.indexOf(stud.Name) == -1 || regList.indexOf(stud.Region) == -1) { 
       newObj.Subject.push(stud.Subject); 
       newObj.Action.push(stud.Action); 
       newItemsList.push(newObj); 
       nameList.push(stud.Name); 
       regList.push(stud.Region); 
      } else { 
       for (var i = 0; i < newItemsList.length; i++) { 
        var item = newItemsList[i]; 
        if (item.Name == stud.Name) { 
         if (item.Subject.indexOf(stud.Subject) == -1) 
          item.Subject.push(stud.Subject); 
         if (item.Action.indexOf(stud.Action) == -1) 
          item.Action.push(stud.Action); 
         console.log(newItemsList); 
        } 
       } 
      } 
      $scope.newList = newItemsList; 
     });

分組在HTML中添加下面的模板來顯示分組的數據。

<table> 
    <tr > 
    <td>Name</td> 
    <td>Region</td> 
    <td>Subject</td> 
    <td>Action</td> 
</tr> 
<tr ng-repeat="item in newList track by $index"> 
    <td>{{item.Name}}</td> 
    <td>{{item.Region}}</td> 
    <td><p ng-repeat="sub in item.Subject track by sub">{{sub}}</p></td> 
    <td><p ng-repeat="action in item.Action track by action">{{action}}</p></td> 
</tr> 
</table>

這是你的新馬培德數據顯示

[{"Name":"Michael","Region":"Canada","Subject":["Chemistry","Biology"],"Action":["Email","Call"]},{"Name":"Kristen","Region":"USA","Subject":["Chemistry","Physics","Biology"],"Action":["Skype","Email","Call"]},{"Name":"Kristen","Region":"Europe","Subject":["Chemistry","Biology"],"Action":["Call"]}]

來源

2016-09-29 14:49:43

謝謝Angular_10。您的解決方案有助於解決我的問題。沒有完全理解「跟蹤」的工作原理，但會研究更多。再次感謝您和Stack Overflow。 – user3172224

歡迎你歡呼！ –

需要使用ng-repeat（兩列上的組）顯示數據

回答

相關問題