单击时在角度数据表中获取整行数据

时间:2017-05-25 11:56:36

标签: jquery angularjs angular-datatables

我有一个使用ng-repeat

动态添加行的表



ipad air




点击任何行嵌套行出现..但为此我需要获得行的整个数据不仅点击出现的列..我需要整个对象"数据"用于ng-repeat



<div class="row form-group">
  <div class="col-md-12">
    <table id="example" datatable="ng" dt-options="dtOptions" dt-instance="dtInstance" class="row-border hover table table-condensed table-hover" ng-init="profileDetails()">
      <thead>
        <tr>
          <th></th>
          <th>WHEN</th>
          <th>HOW MUCH</th>
          <th>RELATED TO</th>
          <th>WHAT FOR</th>
          <th>FROM</th>
          <th>THIRD PARTY PAYEE</th>
        </tr>
      </thead>
      <tbody>
        <!--ng-click="format1(data)"-->
        <tr ng-repeat="data in OpenPaymentList">
          <td class="details-control"></td>
          <td>{{data.Date_of_Payment | date : 'MMM dd, y' }}</td>
          <td>{{"$" + data.Total_Amount_of_Payment_USDollars}}</td>
          <td>{{data.Name_of_Associated_Covered_Device_or_Medical_Supply1}}</td>
          <td>{{data.Nature_of_Payment_or_Transfer_of_Value}}</td>
          <td>{{data.Applicable_Manufacturer_or_Applicable_GPO_Making_Payment_Name}}</td>
          <td>{{data.Third_Party_Payment_Recipient_Indicator}}</td>
        </tr>

      </tbody>
    </table>

  </div>
</div>
&#13;
&#13;
&#13;

控制器代码如上所述..到目前为止点击一行我只得到表中的7列数据...但我有25个数据没有显示我会喜欢获取相应行的所有数据,以便我可以在嵌套行中使用该信息

1 个答案:

答案 0 :(得分:0)

您可以在控制器内创建一个函数,将函数传递给函数,然后从函数返回一个包含您要显示的所有其他信息的新对象。然后只显示它们。

此外,我的建议是避免以这种方式动态附加HTML。您可以使用tbodies直接在HTML中设置该行。 只需在那里准备你的模板,只使用ng-show来显示点击的其他信息。

实际上,您可以在HTML中执行此操作:

<tbody ng-repeat="data in OpenPaymentList" ng-init="data.detailsVisible = false">
<tr ng-click="format1(data); data.detailsVisible = !data.detailsVisible;">
          <td class="details-control"></td>
          <td>{{data.Date_of_Payment | date : 'MMM dd, y' }}</td>
          <td>{{"$" + data.Total_Amount_of_Payment_USDollars}}</td>
          <td>{{data.Name_of_Associated_Covered_Device_or_Medical_Supply1}}</td>
          <td>{{data.Nature_of_Payment_or_Transfer_of_Value}}</td>
          <td>{{data.Applicable_Manufacturer_or_Applicable_GPO_Making_Payment_Name}}</td>
          <td>{{data.Third_Party_Payment_Recipient_Indicator}}</td>
        </tr>
    <tr ng-show="data.detailsVisible">
      // my new row and inside the cells I call a function of the controller which returns me the data I need
      <td>{{getData(data).myNewProperty}}</td>
      <td>{{getData(data).otherNewProperty}}</td>
    </tr>
  </tbody>

在控制器内部,你的getData函数将返回一个对象将所有细节的新属性:

$scope.getData = function (data) {
  // get all the values using the current data passed in
  return {
    myNewProperty: "hello",
    otherNewProperty: "world"
  };
}

我希望这会有所帮助。