时间戳

首页 > 解决方案 > 项目在 ng-repeat - angular-datatable 中未定义

angularjs - 项目在 ng-repeat - angular-datatable 中未定义

问题描述

我用它来显示表格和分页：https ://github.com/samu/angular-table

ng-repeat我有一张使用上述模块填充的表格。我无法访问ng-repeat(ae in getInvoices) ae未定义中的每个项目。

td我在ng-repeat（EdButton）内部也有一个按钮。单击按钮后，我将当前项目详细信息传递给函数。但是当前的 item( ae) 是未定义的。

所以我尝试将它像这样发送到函数：

`getInvoiceExpenseItems(getInvoices[$index].exp_invoice_id)`

但是当我添加分页时，当我单击分页第二页上的按钮（EdButton）时，我得到了数组的第一个值，因为第二页中的$index值为 0。

表格正确显示所有值

如何获取每个项目或发送正确的索引值？

 <tr ng-repeat="ae in getInvoices">
   <td  at-attribute="entry_date">{{getInvoices[$index].entry_date | date: 'dd-MM-yyyy'}}</td>
   <td  at-implicit at-attribute="exp_invoice_no"></td>
   <td  at-implicit at-attribute="vendor_name"></td>
   <td  at-implicit at-attribute="exp_ref_no"></td>
   <td  at-implicit at-attribute="payable"></td>
   <td>
      <button type="button"
          ng-click="getInvoiceExpenseItems(getInvoices[$index].exp_invoice_id, ae); meminfomodel();   expn = null; ">
      <i class="fa fa-edit"></i>
      </button>
      <button type="button"
         ng-click="deletecustdetailsmodel(getInvoices[$index].exp_invoice_id,getInvoices[$index].customer_id,getInvoices[$index].association_id)">
      <i class="fa fa-trash-o red"></i>
      </button>
   </td>
</tr>

这是对象数组： $scope.getInvoices = response.data.body.Data;

:[  
     {  
        "exp_invoice_id":"1",
        "exp_invoice_no":"874589589865652",
        "exp_invoice_date":"21-7-2018",
        "payable":"15",
        "vendor_id":"4",
        "vendor_name":"brigadeVendorA",
        "customer_id":"5",
        "association_id":"10",
        "exp_ref_no":"exp\/bri\/1",
        "entry_date":"2018-07-07",
        "remarks":"ad"
     },
     {  
        "exp_invoice_id":"2",
        "exp_invoice_no":"874589589865111",
        "exp_invoice_date":"21-7-2018",
        "payable":"9",
        "vendor_id":"4",
        "vendor_name":"brigadeVendorA",
        "customer_id":"5",
        "association_id":"10",
        "exp_ref_no":"exp\/bri\/2",
        "entry_date":"2018-07-28",
        "remarks":"rem"
     }

]

标签： angularjs

解决方案

您应该阅读这个angular-table的文档。ng-repeat使用此库指令来实现表后，您无需使用。只需at-table at-list="getInvoices"在 table 元素上声明，默认情况下它将被视为getInvoices对象数组并迭代其属性。

所以，在里面tr你必须td用你想要显示的属性来定义不同的东西。您应该使用at-title属性（来自此插件库）来定义列标题。然后，如果您想在任何属性上使用过滤器，您可以立即使用（连同绑定），或者您可以为此创建方法并将属性值作为参数发送，然后在控制器中使用$filter. 默认情况下，这里item是一个重复的对象（库的内部 ng-repeat 代码的一部分），因此，item.propertyName将获得您所需的属性。同样，当您在任何内部使用按钮并在其td上使用 ng-click 指令并想要传递对象时，只需传递item给任何函数，它将发送该特定行的整个对象。

您更新的视图代码可以是：

<table at-table at-list="getInvoices" class="table table-striped">
  <thead></thead>
  <tbody>
    <tr>
      <td at-title="Entry Date">{{item.entry_date | date:"dd-MM-yyyy"}}</td>
      <td at-implicit at-attribute="exp_invoice_no"></td>
      <td at-implicit at-attribute="vendor_name"></td>
      <td at-implicit at-attribute="exp_ref_no"></td>
      <td at-implicit at-attribute="payable"></td>
      <td>
        <button type="button" ng-click="getInvoiceExpenseItems($event, item)">
          <i class="fa fa-edit"></i>
        </button>
        <button type="button" ng-click="deletecustdetailsmodel($event, item)">
          <i class="fa fa-trash-o red"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

控制器中的这些方法可以是：

 $scope.getInvoiceExpenseItems = function(event, item) {
    //Write logic of getting invoice of item 
    console.log(item);
  }

  $scope.deletecustdetailsmodel = function(event, item) {
    // Write logic of deleting particular item
    console.log(item);
  }
  // Below method used in case you want to filter something inside controller
  $scope.getFormatedDate = function(dateStr) {
    var date = new Date(dateStr);
    var formatted = $filter('date')(date, "dd-MM-yyyy");
    return formatted;
  }

单击相应按钮后检查控制台，您将获得该特定行的完整对象（来自数组）。

演示示例

推荐阅读