ng-Show records of table on condition

Question

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

Answer 1

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

Answer 2

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