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

Question

我有一个使用 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>

单击任何行嵌套行时出现.. 但为此我需要获取单击的行的整个数据，而不仅仅是出现的列.. 我需要在 ng-repeat 中使用的整个对象“数据”

$scope.dtInstance = {};
$scope.dtOptions = DTOptionsBuilder.newOptions()
  ////.withOption('serverSide', true)
  //.withOption('hasBootstrap', true)
  //.withOption('processing', true)
  //.withDisplayLength(10)
  //.withPaginationType('full_numbers')            .withOption('stateSave', true)
  //.withOption('searchDelay', 350)
  //.withOption('width', '100%')
  //.withDataProp('data');
  .withOption('order', [
    [0, 'desc']
  ])
  .withOption('bFilter', false)
  .withOption('lengthChange', false)
  .withOption('rowCallback', rowCallback)
  .withOption('createdRow', createdRow);

function createdRow(row, data, dataIndex) {
  // Recompiling so we can bind Angular directive
  debugger;
  $compile(angular.element(row).contents())($scope);
}

function rowCallback(tabRow, data, dataIndex) {
  $(tabRow).unbind('click');
  $(tabRow).on('click', function() {
    console.log('click' + data);
    $(this).find('.a1-icon').toggleClass('fa-rotate-180');
    var tr = $(tabRow);
    var table = $scope.dtInstance.DataTable;
    var row = table.row(tr);

    if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child(format(row.data())).show();
      tr.addClass('shown');
    }
  });
}

function format(d) {
  debugger;
  console.log(JSON.stringify(d));
  // `d` is the original data object for the row
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr>' +
    '<td>Full name:</td>' +
    '<td>' + d.Date_of_Payment + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Extension number:</td>' +
    '<td>' + d.Date_of_Payment + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Extra info:</td>' +
    '<td>And any further details here (images etc)...</td>' +
    '</tr>' +
    '</table>';
}

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

Answer 1

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

此外，我的建议是避免以这种方式动态附加 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"
  };
}

我希望这会有所帮助。