Javascript 床头

我有一个标题中有三列的表。我想绑定一个计算第三列的函数——运行总计列。当我将这个绑定添加到模板中的thead时，我得到了我想要的结果。但是我的桌头丢了。我在一个用户提出的解决方案中工作，它成功了，我的桌面恢复了。但现在的问题是，有另一个视图使用扩展表模板。我需要做的是，在$table.properties中的ng repeat属性track by 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>

{{property.label}

这是模板代码：

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));
      });
    },
  })
]);

从'act/app'导入应用程序；
从“act/components/table”导入*作为表格；
导入“./扩展表.styles.less”；
从“jquery”导入*为$；
常数扩展器=`
`;
常数fakeRows=`
${expander}
笨蛋
`;
常数头=`
{{property.label}
`;
常量行=（{row，ngRepeat，cell}）=>`
${row（{cell}）}
`;
常量行=（{cell}）=>`
${expander}
${cell}
`;
app.directive（'actExpandingTable'，['$compile'，$compile=>
表1.defaultDirective({
链接：函数（$scope、$element、$attrs、$tables、$transclude）{
//想知道这里发生了什么吗？请参阅table/table.resources.js
const$el=$（table.generateTemplate（{header，rows，row，fakeRows}））；
$scope.vm=$scope.$parent.vm；
$scope.calculateRunningTotal=函数（）{
如果（类型==“runningTotal”）{
log（“计算调用的运行总数”）；
var attendantTotalCell=0；
var合计=0；
var totalCell=“”；
var totalsCells=document.queryselectoral（“td:n子级（3）”）；
totalsCells.forEach（函数（单元格、索引）{
totalCell=cell.innerText；
attendantTotalCell=totalCell.replace（/[^0-9-.]/g'）；
总计=parseInt（attendantTotalCell）+parseInt（总计）；
if（cell.nextElementSibling）{
cell.nextElementSibling.innerHTML='$'+total.toFixed（2）.替换（/\d（？=（\d{3}）+\）/g，'$&'）；
}
})
var tableheadlow=document.querySelectorAll（'th.col-xs-2.clickable'）；
桌子头下方。每小时（th=>{
th.addEventListener（“单击”，函数（）{
console.log（“点击桌面”）；
var attendantTotalCell=0；
var合计=0；
var totalCell=“”；
totalsCells.forEach（函数（单元格、索引）{
totalCell=cell.innerText；
attendantTotalCell=totalCell.replace（/[^0-9-.]/g'）；
总计=parseInt（attendantTotalCell）+parseInt（总计）；
if（cell.nextElementSibling）{
cell.nextElementSibling.innerHTML='$'+total.toFixed（2）.替换（/\d（？=（\d{3}）+\）/g，'$&'）；
}
})
})
}) 
退货标签；
}
}
$transclude（$scope，content=>{
如果（content.length>1）{
$el.find（“[扩展占位符]”）.replaceWith（内容）；
}否则{
抛出新错误（'扩展表需要在扩展时显示转包的内容！'）；
}
$compile（$el）（$scope，v=>$element.append（v））；
});
},
})
]);

使用双卷曲标记{{calculateRunningTotal（）}}而不是ng bind，因为带有函数的ng bind不会在每个摘要循环中激发，除非您将任何变量传递给该方法。查看此链接以了解更多详细信息-

---

代码笔样本供参考-

@长崎感谢您的回复。第二个解决方案奏效了。使用插值。谢谢。很高兴@CMazz成功了，我试着复制相同的问题：）将我的评论作为答案发布，如果效果如预期，请将其标记为答案。我将编辑我的原始问题，因为您的建议现在可以使用您上面的建议。但是还有一个视图使用这个扩展表模板。使用属性“type”的列标题现在已断开并显示NAN。我将更新我的问题以使其更清楚。我已更新我的问题。感谢您坚持我的观点并将其看透。请尝试传递property.type calculateRunningTotal（property.type）并在函数内部检查$scope.calculateRunningTotal=函数（type）{if（type==“runningTotal”）{//execute calculation}我想我们已经接近了。我已经更新了我的问题，以显示表现在是什么样子。最后一个建议基本上是我想要发生的事情正在发生。但现在两个表中都缺少表头列。但是我想我们已经接近了..我想您忘记了为$scope.calculateRunningTotal=函数（label）{//total calculation here return label}添加返回值了

<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>

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

return label

}