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

时间:2017-04-17 04:43:29

标签: javascript jquery html angularjs json

我试图通过ng-hide和ng-show机制显示列的行和值的总和。它有三种状态可以控制。

1)自动

2)直播

3)autolive(不存在于json中,需要自动和实时组合行)

结论:

在siteData.jobType == toggleValue if(toggleValue == auto),它显示" auto"

的记录

在siteData.jobType == toggleValue(toggleValue == live)上,它会显示" live"

的记录

但是在siteData.jobType == toggleValue(toggleValue == autolive)上,它显示了合并结果

现在,问题是在切换值更改时没有执行计数,当页面加载时,它仍然与组合结果相同, 我想让它改变切换。

在类型自动上,它应为:4 在类型实时上,它应该是: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
        }
    ]
    }

Combined result auto result

live result

2 个答案:

答案 0 :(得分:1)

应该是这样的。它更好地使用过滤器而不是ng-show指令。并使用过滤数据的大小来计算总站点数。

<tr ng-repeat="siteData  in filtered = (siteObject.data | filter:
 {Type:toggleValue})" >
  <td>{{siteData.Date}}</td>
  <td >{{filtered.length}}</td>
</tr>

DEMO

答案 1 :(得分:1)

而不是使用SELECT DISTINCT TOP 10 acc.account_no FROM account (NOLOCK) acc CROSS APPLY( SELECT COUNT(1) AS piece FROM account (NOLOCK) acc2 WHERE acc.account_no= acc2. account_no AND status= 'P' ) AS X CROSS APPLY( SELECT COUNT(1) AS piece2 FROM account (NOLOCK) acc2 WHERE acc.account_no = acc2. account_no ) AS Y WHERE X.piece= Y.piece2 来呈现所选内容。你应该使用适当的过滤器。在这种情况下,您需要创建自定义过滤器,因为您希望在切换值为ng-show时显示所有项目。

所以像这样工作的自定义过滤器应该这样做:

autolive

而且,在您的HTML中,您可以拥有

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

调用控制器中的一个函数来计算总成功值,

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

请注意我是如何将属性$scope.getTotal = function(arr, attr) { var count = 0; angular.forEach(arr, function(val) { count += val[attr]; }) return count } 传递给该函数的,并将其作为'countSuccess'中的属性使用。现在,类似地,您可以传递失败的其他属性(可能是val[attr])并获得该值。

有趣的是,我已经在你的last question中提到了使用countFailure代替filter的方法,但你似乎跟ng-show一起去了:)< / p>

这是您的working codepen(已更新,动态属性)