javascript - 在 Angular js 中使用 ng-repeat 指令在表中显示数组数据

Question

我正在使用 Angular.js、Node.js 和 MongoDB 构建应用程序。

我通过ajax调用得到了一组数据，如下所示

[{
    "event":"treat",
    "expenselist":[
        {"text":"a","done":true,"value":"100"},
        {"text":"b","done":true,"value":"400"}
    ],
    "expense":500,
    "sharelist":[
        {"text":"b","done":true},
        {"text":"c"},
        {"text":"d","done":true},
        {"text":"a","done":true},
        {"text":"e","done":true}
    ],
    "shareno":4,
    "shareamount":125
},{
    "event":"lunch",
    "expenselist":[
        {"text":"c","done":true,"value":"500"}
    ],
    "expense":500,
    "sharelist":[
        {"text":"b","done":true},
        {"text":"c","done":true},
        {"text":"d","done":true},
        {"text":"a","done":true},
        {"text":"e","done":true}
    ],
    "shareno":5,
    "shareamount":100
}]

我将数据一个一个地推送到数组 $scope.sharedetails 中，以便在每一行中显示每个事件。

angular.forEach(data,function(event,k){
$scope.sharedetails.push(data[k]);
$scope.expensedetails.push($scope.sharedetails[k].expenselist);
$scope.attendeedetails.push($scope.sharedetails[k].sharelist);

  angular.forEach($scope.expensedetails,function(text,i){
     angular.forEach($scope.expensedetails[i],function(text,j){

if($scope.expensedetails[i][j].done==true){
$scope.spentpeople.push($scope.expensedetails[i][j].text);   
$scope.expensevalues.push($scope.expensedetails[i][j].value); 

}

});
});
  angular.forEach($scope.attendeedetails,function(text,i){
      angular.forEach($scope.attendeedetails[i],function(text,j){

if($scope.attendeedetails[i][j].done==true){
   $scope.sharelistresult.push($scope.attendeedetails[i][j].text);  
}

});
});
});

HTML:

              <td>{{sharedetail.event}}</td>
            <td><ul class="unstyled">
            <li ng-repeat="spent in spentpeople">
            <span>{{spent}}</span>          
            </li>
            </ul>
            </td>
            <td>{{sharedetail.expenselist.value}}
            <ul class="unstyled">
            <li ng-repeat="expensevalue in expensevalues">
            <span>{{expensevalue}}</span>           
            </li>
            </ul></td>
            <td>{{sharedetail.expense}}</td>
            <td><ul class="unstyled">
            <li ng-repeat="sharename in sharelistresult">
            <span>{{sharename}}</span>          
            </li>
            </ul></td>
            <td>{{sharedetail.shareamount}}</td>
            </tr>

我想要这样的结果

Event |Spent By |Spent Amounts|Totalamount |Shared By |No of shares|ShareAmount
--------------------------------------------------------------------------------------
treat |a        |100          |500         |b         |4            |125
      |b        |400          |            |d
      |         |             |            |a
      |         |             |            |e
 --------------------------------------------------------------------------------
lunch |c        |500          |500         |b         |5            |100
                                           |c
                                           |d
                                           |a
                                           |e         |

我已经编辑了我的代码。在这种情况下，只有当只有一行时，我才能得到所需的结果。

当有多个条目(事件)时，我得到

 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.6/ngRepeat/dupes?p0=spent%20in%20spentpeople&p1=string%3A

如何分别显示带有“文本”和“值”的费用列表数组。请指教

Answer 1

如果你已经有了一个 json 数组，你就不需要做所有这些推送。只需将它分配给范围并像这样呈现您的表格:

<tr ng-repeat="sharedetail in sharedetails">
  <td>{{sharedetail.event}}</td>
  <td>
    <li ng-repeat="item in sharedetail.expenselist">
      {{item.text}}
    </li>
  </td>
  <td>
    <li ng-repeat="item in sharedetail.expenselist">
      {{item.value}}
    </li>
  </td>
  <td>{{sharedetail.expense}}</td>
  </td>
  <td>
    <li ng-repeat="item in sharedetail.sharelist">
      {{item.text}}
    </li>
  </td>
  <td>{{sharedetail.shareno}}</td>
  <td>{{sharedetail.shareamount}}</td>
</tr>

看看这里的这个笨蛋:Plunker

不要忘记在表格标签中设置 Controller 。