带角度的多维数组答案

【问题标题】：Multidimensional arrays with angular带角度的多维数组
【发布时间】：2015-01-08 17:06:13
【问题描述】：

我目前正在尝试使用 angular 在表格中显示数组数据。这是我的 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"
    }
}];

我似乎无法打印 transactions 数组中的数据？我刚开始有角度，所以我不太确定发生了什么。任何见解都会很棒，我正在努力学习而不是让它发挥作用。谢谢！

【问题讨论】：

您正在打印 {{user.transDate}} 而它是 transaction {{transaction.transDate}} 的属性。类似地改变其他人
当我打印出 transaction.transLocale 时，它插入了用户名，而不是位置数据

标签： javascript arrays angularjs multidimensional-array angularjs-ng-repeat

【解决方案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>

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

【讨论】：

"在您的视图中更改 user.transactions 中的 users.transactions。"这是什么意思？

【解决方案2】：

它将帮助您找到我制作的 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>

【讨论】：

【解决方案3】：

试试这个

<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;
});

【讨论】：