在Angular js中使用ng-repeat指令在表中显示数组数据 [英] displaying an array data in a table using ng-repeat directive in Angular js

问题描述

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

I am building an application using Angular.js,Node.js and MongoDB.

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

I have got an array of data through ajax call and is as follows

[{
    "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中逐一推送数据，以便在每一行中显示每个事件.

I am pushing the data one by one in an array $scope.sharedetails inorder to display each event in each row.

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         |

我已经编辑了代码.在这种情况下，只有在单行的情况下，我才能获得所需的结果.

I have edited my code.In this,I get the required result only when there is a single row.

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

When there are multiple entries(event),I get

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

如何分别显示文本"和值"的费用清单数组. 请指教

How to display expense list array with "text" seperately and "value" seperately. Please advice

推荐答案

如果您已经拥有json数组，则无需执行所有这些操作.只需将其分配到作用域并像这样呈现您的表即可:

You dont need to do all this pushing if you allready have a json array. Just asign it to the scope and render your table like this:

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

在这里查看这个矮人:柱塞

Look at this plunker here: Plunker

不要忘记在表标签中设置控制器.

Don't forget to setup the controller in the table tag.

这篇关于在Angular js中使用ng-repeat指令在表中显示数组数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！