ng-Show records of table on condition

2019-09-12 06:16发布

问题:

I am trying to show rows and their sum of value of columns. It has three states on which condition held.

1) auto 2) live 3) autolive (not present in json, need auto and live combine in rows)

Conclusion:

On siteData.jobType==toggleValue if (toggleValue==auto ), it shows records of "auto"

On siteData.jobType==toggleValue (toggleValue==live ), it shows records of "live"

But on siteData.jobType==toggleValue (toggleValue==autolive ), it shows no record , coz autolive is not present in json

How can I achieve it to show combine records of auto and live?

// custom toggle button 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="siteData.jobType==toggleValue"   >

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

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

I want all of them when i toggle autolive

回答1:

try this workaround: ng-show="toggleValue.indexOf(siteData.jobType) > -1"



回答2:

You need to create a custom filter function like this: (can be named anything)

<tr ng-repeat="siteData in siteObject.data | filter: customFilter">

And, in your controller, you can implement some custom logic for that. Something like this:

$scope.customFilter = function(obj) {
  if($scope.toggleValue !== 'autolive') {
    return obj.Type === $scope.toggleValue      
  } 
  return true;
}

That should do it!

Here's working codepen example