Question

我有一个表，表头有三列。我想绑定一个计算该第三列的函数-正在运行的总计列。当我将此绑定添加到模板中的thead时，我得到了想要的结果。但是我丢了表头。我在一个用户提出的解决方案中工作，结果奏效了，我的桌面又回来了。但是现在的问题是，还有另一个使用扩展表模板的视图。我需要做的是，在$ table.properties中的此ng-repeat属性中，按property.type进行跟踪，我需要检查表是否具有'runningTotal'类型的属性。如果可以，则触发我的calculateRunningTotal函数。否则，此函数将针对使用此模板的每个表触发并尝试操纵第三列，无论可能是什么。那不是我所需要的。

<th ng-bind="calculateRunningTotal(property.type)" ng-repeat="property in $table.properties track by property.type"
            class="col-xs-{{property.size}} clickable" ng-click="$table.sorter.changeType(property.type)">
            {{property.label}} &nbsp;
          <i class="fa fa-caret-{{$table.sorter.directionFor(property.type)}} fa-lg"></i>
        </th>

这是模板代码：

import app from 'act/app';
import * as table from 'act/components/table';
import './expanding-table.styles.less';
import * as $ from 'jquery';

const expander = `
  <td class="col-xs-1 text-center link" ng-click="$event.stopPropagation()">
    <i class="fa fa-chevron-{{$item.expanded ? 'up' : 'down'}}" ng-click="$item.expanded = !$item.expanded"></i>
  </td>
`;

const fakeRows = `
  <tbody ng-if="!$table.list.length">
    <tr class="dummy-data" ng-repeat="dummy in $table.fakeRows">
      ${expander}

      <td ng-repeat="property in $table.properties track by property.type">
        dummy
      </td>
    </tr>
  </tbody>
`;

const header = `
  <thead>
    <th>

    </th>

    <th ng-bind="calculateRunningTotal()" ng-repeat="property in $table.properties track by property.type"
        class="col-xs-{{property.size}} clickable" ng-click="$table.sorter.changeType(property.type)">
        {{property.label}} &nbsp;
      <i class="fa fa-caret-{{$table.sorter.directionFor(property.type)}} fa-lg"></i>
    </th>
  </thead>
`;

const rows = ({ row, ngRepeat, cell }) => `
  <tbody ng-if="$table.list.length">
    <tr class="clickable"
        ng-repeat-start="${ngRepeat}"
        ng-click="$item.expanded = !$item.expanded"
        ng-init="$item.expanded = false">
      ${row({ cell })}
    </tr>

    <tr class="expanded-row" ng-show="$item.expanded"
        ng-repeat-end>
      <td colspan="12">
        <div expanded-placeholder></div>
      </td>
    </tr>
  </tbody>
`;

const row = ({ cell }) => `
  ${expander}

  ${cell}
`;

app.directive('actExpandingTable', ['$compile', $compile =>
  table.defaultDirective({
    link: function($scope, $element, $attrs, $tables, $transclude) {
      // wondering what's going on here? see table/table.resources.js

      const $el = $(table.generateTemplate({ header, rows, row, fakeRows }));
      $scope.vm = $scope.$parent.vm;
      $scope.calculateRunningTotal= function(){
 if(type ==="runningTotal"){
        console.log("Calculate Running Total Called");
        var attendantTotalCell = 0;
        var total = 0;
        var totalCell="";
        var totalsCells = document.querySelectorAll("td:nth-child(3)");

        totalsCells.forEach(function(cell, index){
          totalCell = cell.innerText;
          attendantTotalCell = totalCell.replace(/[^0-9-.]/g, '');
          total = parseInt(attendantTotalCell) + parseInt(total);
          if(cell.nextElementSibling){
          cell.nextElementSibling.innerHTML = '$' + total.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
          }
        })

        var tableHeadRow = document.querySelectorAll('th.col-xs-2.clickable');
        tableHeadRow.forEach(th =>{
          th.addEventListener("click", function(){
            console.log("Table head clicked");
            var attendantTotalCell = 0;
            var total = 0;
            var totalCell="";
            totalsCells.forEach(function(cell, index){
              totalCell = cell.innerText;
              attendantTotalCell = totalCell.replace(/[^0-9-.]/g, '');
              total = parseInt(attendantTotalCell) + parseInt(total);
              if(cell.nextElementSibling){
              cell.nextElementSibling.innerHTML = '$' + total.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
              }
            })
          })
        }) 
         return label;
         }
        }
      $transclude($scope, content => {
        if (content.length > 1) {
          $el.find('[expanded-placeholder]').replaceWith(content);
        } else {
          throw new Error('Expanding table requires transcluded content to show when expanded!');
        }

        $compile($el)($scope, v => $element.append(v));
      });
    },
  })
]);

Answer 1

使用双卷曲标记{{calculateRunningTotal（）}}代替ng-bind，因为ng-bind与一个函数不会在每个摘要周期触发，除非您将任何变量传递给该方法。检查此链接以获取更多详细信息-AngularJS ng-bind with a function

<th ng-repeat="property in $table.properties track by property.type"
        class="col-xs-{{property.size}} clickable" ng-click="$table.sorter.changeType(property.type)">
        {{calculateRunningTotal()}}{{property.label}} &nbsp;
      <i class="fa fa-caret-{{$table.sorter.directionFor(property.type)}} fa-lg"></i>
    </th>

出现空白标题的原因：

th 标签显示ng-bind函数的返回值，因为calculateRunningTotal会计算总计而不返回任何值，标题变为空

要解决ng-bind的问题，请将property.label传递给ng-bind =“ calculateRunningTotal（property.label）”并从calculateRunningTotal返回值

$scope.calculateRunningTotal= function(label){
  //total calculation here

return label

}

codepen示例以供参考-https://codepen.io/nagasai/pen/vzqadB

伍氏影响台头

1 个答案: