javascript - 计算 ng-hide 和 ng-show 上表的记录值计数

Question

我试图通过 ng-hide 和 ng-show 机制显示行及其列的值总和。它具有满足条件的三个状态。

1) 自动

2) 直播

3) autolive(json中不存在，需要auto和live按行组合)

结论:

在 siteData.jobType==toggleValue if (toggleValue==auto ) 上，显示“auto”的记录

在 siteData.jobType==toggleValue (toggleValue==live ) 上，显示“live”的记录

但是在 siteData.jobType==toggleValue (toggleValue==autolive ) 上，它显示组合结果

现在，问题是计数没有对切换值的更改执行，它在页面加载时保持组合结果相同，我希望它在切换时改变。

在类型auto上，它应该是:4在类型 live 上，它应该是:2

引用: ng-Show records of table on condition

//自定义切换按钮https://github.com/tannerlinsley/nz-toggle

<nz-toggle
tri-toggle
on-toggle="myFunction()"
ng-model="toggleValue"
val-true="'auto'"
val-false="'live'"
val-null="'autolive'">
</nz-toggle> 



<table class="table table-condensed" border ="1" >
<thead>
<tr>

<th>PiteId</th>
<th>PiteId</th>
<th>Type</th>
<th>Date</th>
<th >Success</th>


</tr>
</thead>
<tbody>
<tr ng-repeat="siteData in siteObject" ng-show="toggleValue.indexOf(siteData.jobType) > -1"  >

<td>{{siteData.sid}}</td>
<td>{{siteData.PiteId}}</td>
<td>{{siteData.Type}}</td>
<td>{{siteData.Date}}</td>
<td  ng-init="siteObject.total.siteData.countSuccess = siteObject.total.siteData.countSuccess + siteData.countSuccess">{{siteData.countSuccess}}</td>
</tr>
</table>

json格式

siteObject =
    {
    "data": [
      {
          "sid": 1,
          "PiteId": "1~10-4-2017~15:13:40",
          "Type": "live",
          "Date": "2017-04-14T18:30:00.000Z",
          "countSuccess": 1
        },

      {
          "sid": 1,
          "PiteId": "1~10-4-2017~15:13:40",
          "Type": "auto",
          "Date": "2017-04-14T18:30:00.000Z",
          "countSuccess": 1
        }
    ]
    }

Answer 1

而不是使用ng-show来渲染所选内容。您应该使用合适的过滤器。在这种情况下，您需要创建一个自定义过滤器，因为您希望当切换值为 autolive 时显示所有项目。

因此，像这样工作的自定义过滤器应该可以做到这一点:

$scope.customFilter = function(obj) {
  return $scope.toggleValue.indexOf(obj.Type) > -1;
}

并且，在您的 HTML 中，您可以拥有

<tr ng-repeat="siteData in sites = (siteObject.data | filter: customFilter)">
  ...
</tr>
...
<tr>
  <td ng-bind="getTotal(sites, 'countSuccess')"></td>
</tr>

调用 Controller 中的函数来计算总成功值，

$scope.getTotal = function(arr, attr) {
    var count = 0;
    angular.forEach(arr, function(val) {
      count += val[attr];
    })
    return count
}

请注意我如何将属性 'countSuccess' 传递给函数，并在 val[attr] 中使用该属性作为属性。现在，类似地，您可以传递失败的其他属性(可能是 countFailure)并获取该值。

有趣的是，我在您的 last question 中提到了使用 filter 而不是 ng-show 的方法。也一样，但你似乎在那里使用 ng-show :)

这是您的working codepen (已更新，针对动态属性)