計算ng-hide和ng-show表的記錄值的計數

Question

我想通過ng-hide和ng-show機制顯示行和它們的的值的總和列。它有三個州在哪個條件下舉行。

1）自動

2）住

3）autolive（不是JSON目前，需要汽車和生活結合起來，行）

結論：

在siteData。 jobType == toggleValue if（toggleValue == auto），它顯示「auto」的記錄

on siteData.jobType == togg leValue（toggleValue ==直播），這表明 「活」 的記錄

但在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 
     } 
    ] 
    } 

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> 

這在您的控制器調用的函數計算總的成功值我

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

注意如何通過屬性'countSuccess'給函數的n並且它使用該屬性作爲val[attr]中的屬性。現在，類似地，你可以通過其他屬性來失敗（也許countFailure）並獲得該值。

搞笑的是，我曾提到在last question使用filter代替ng-show還有的這種做法，但你好像去與ng-show那裏:)

這是你的working codepen（更新，動態屬性）

Answer 2

它應該是這樣的。它更好地使用過濾器而不是ng-show指令。併爲總網站使用過濾數據的大小。

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

DEMO