angular 的多维数组

Question

我目前正在尝试使用 angular 在 table 中显示数组数据。这是我的 HTML：

            <table>
            <thead>
                <tr>
                    <th>Location</th>
                    <th>User</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Amount</th>
                    <th>Transaction Type</th>
                    <th>Direct Object</th>

                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in index.users">
                    <td ng-repeat="transaction in users.transactions">
                     {{transaction.transLocale}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.transDate}}</td>
                    <td>{{user.transTime}}</td>
                    <td>{{user.transAmount}}</td>
                    <td>{{user.transType}}</td>
                    <td>{{user.directObject}}</td>
                </tr>
            </tbody>
        </table>

这是我的 js：

app.controller('IndexController', function(){
    this.users = userHistory;
}); 



var userHistory = [
{
    name: 'Bobby',
    transactions: 
     [{
        transDate: '1/15/15',
        transTime: '4:30pm',
        directObject: 'Matt',
        transAmount: '11',
        transType: 'debt',
        transLocale: 'B-dubs'
    },{
        transDate: '1/12/15',
        transTime: '7:30pm',
        directObject: 'Matt',
        transAmount: '9',
        transType: 'credit',
        transLocale: 'MickDs'       
        }]
 },

{   name: 'Jake',
    transactions: [
     {
        transDate: '1/11/15',
        transTime: '1:30pm',
        directObject: 'Matt',
        transAmount: '5',
        transType: 'credit',
        transLocale: "Jason's"
    }, {
        transDate: '1/12/15',
        transTime: '7:30pm',
        directObject: 'Matt',
        transAmount: '9',
        transType: 'debt',
        transLocale: 'MickDs'       
    }]
},
    {
    name: 'Clayton',
    transactions: {
        transDate: '1/14/15',
        transTime: '2:30pm',
        directObject: 'Matt',
        transAmount: '15',
        transType: 'credit',
        transLocale: "Chen's"
    }
}];

我好像无法打印交易数组中的数据？我刚从 angular 开始，所以我不太确定发生了什么。任何见解都会很棒，我正在努力学习，而不是试图让它发挥作用。谢谢！

Answer 1

将第一个ng-repeat绑定到tbody:

<tbody ng-repeat="user in users">
    <tr ng-repeat="transaction in user.transactions">
        <td>{{transaction.transLocale}}</td>
        <td>{{user.name}}</td>
        <td>{{transaction.transDate}}</td>
        <td>{{transaction.transTime}}</td>
        <td>{{transaction.transAmount}}</td>
        <td>{{transaction.transType}}</td>
        <td>{{transaction.directObject}}</td>
    </tr>
</tbody>

您的 table 中可以有多个 tbody 元素。

Answer 2

试试这个

<tbody>
  <tr ng-repeat="user in users">
    <table>
      <tbody>
        <tr ng-repeat="transaction in user.transactions">
          <td>{{transaction.transLocale}}</td>
          <td>{{user.name}}</td>
          <td>{{transaction.transDate}}</td>
          <td>{{transaction.transTime}}</td>
          <td>{{transaction.transAmount}}</td>
          <td>{{transaction.transType}}</td>
          <td>{{transaction.directObject}}</td>
        </tr>
      </tbody>
    </table>
  </tr>
</tbody>

脚本：

app.controller('IndexController', function(){
    $scope.users = userHistory;
});

Answer 3

它将帮助您找到我制作的 plunker:- http://plnkr.co/edit/1GhzyeszaeGPAC2cu4ib?p=preview

<tbody>
  <tr ng-repeat="user in index.users">
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transLocale}}
        <br>
      </span>
    </td>
    <td>{{user.name}}</td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transDate}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transLocale}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transTime}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transAmount}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.transType}}
        <br>
      </span>
    </td>
    <td>
      <span ng-repeat="transaction in user.transactions">
        {{transaction.directObject}}
        <br>
      </span>
    </td>
  </tr>
</tbody>

angular 的多维数组

Multidimensional arrays with angular

javascript

arrays

multidimensional-array

angularjs

angularjs-ng-repeat