Question

我有以下角度代码

$scope.receipts = {
    acquirer : [
        {
            id: 1,
            name: "test",
            balanceAmount: 4462.29,
            cardProducts: [
                {
                    cardProduct: {
                        balanceAmount: 2222,
                        id: 1,
                        name: "MASTERCARD CREDITO",
                        lancamentos: [
                            {
                                description: "vendas",
                                payedAmount: 1111
                            },
                            {
                                description: "cancelamentos",
                                payedAmount: 1111
                            }
                        ]
                    }
                }
            ]
        }
    ]
};

我正在尝试使用ng-repeat制作表格

<tbody ng-repeat="i in receipts.acquirer[0].cardProducts[0].cardProduct">
   <tr>
      <th>
         <div class="cardFlag brand_1"></div>
         {{ i.name }}
      </th>
   </tr>
</tbody>

但它没有显示“MASTERCARDCRÉDITO”这个名字。我的代码有什么问题？我是否以错误的方式使用ng-repeat？

Answer 1

如果您需要输出＆＃39; test＆＃39;，则必须将ng-repeat更改为：

＆＃13;

ng-repeat="i in receipts[0].acquirer"

＆＃13;

您目前使用的代码是指＆quot; cardProduct＆＃39;的名称。对象：MASTERCARD CREDITO

Answer 2

正在发生的事情是ng-repeat重复了对象的属性，这些属性的值进入i。 i不是对象。所以它只是i而不是i.name或i.balandAmount。

您还可以将ng-repeat表达式更改为(key,value) in。这会将属性名称放在key中，将属性值放在value

中

ng-repeat="(key, value) in receipts.acquirer[0].cardProducts[0].cardProduct"

演示

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.receipts = {
      acquirer : [
          {
              id: 1,
              name: "test",
              balanceAmount: 4462.29,
              cardProducts: [
                  {
                      cardProduct: {
                          balanceAmount: 2222,
                          id: 1,
                          name: "MASTERCARD CREDITO",
                          lancamentos: [
                              {
                                  description: "vendas",
                                  payedAmount: 1111
                              },
                              {
                                  description: "cancelamentos",
                                  payedAmount: 1111
                              }
                          ]
                      }
                  }
              ]
          }
      ]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ctrl">
  <tbody>
    <tr ng-repeat="(key, value) in receipts.acquirer[0].cardProducts[0].cardProduct">
      <th>
        <div class="cardFlag brand_1"></div>
        {{ key }}
      </th>
      <td>
        {{value}}
      </td>
    </tr>    
  </tbody>
</table>

如果您打算重复cardProducts数组中的每个项目，只需使用.cardProducts结束表达式

ng-repeat="i in receipts.acquirer[0].cardProducts"

然后使用i.cardProduct访问该对象，即i.cardProduct.name

演示

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.receipts = {
      acquirer : [
          {
              id: 1,
              name: "test",
              balanceAmount: 4462.29,
              cardProducts: [
                  {
                      cardProduct: {
                          balanceAmount: 2222,
                          id: 1,
                          name: "MASTERCARD CREDITO",
                          lancamentos: [
                              {
                                  description: "vendas",
                                  payedAmount: 1111
                              },
                              {
                                  description: "cancelamentos",
                                  payedAmount: 1111
                              }
                          ]
                      }
                  }
              ]
          }
      ]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ctrl">
  <tbody>
    <tr ng-repeat="i in receipts.acquirer[0].cardProducts">
      <th>
        <div class="cardFlag brand_1"></div>
        {{ i.cardProduct.name }}
      </th>
    </tr>    
  </tbody>
</table>

Answer 3

我不知道为什么，但我把ng-repeat更改为

<tbody ng-repeat="i in receipts.acquirer[0].cardProducts[0]">

它有效。对此有合理的答案吗？

ng-repeat不在表中工作

3 个答案: