CODEWITHSUNDEEP
javascriptangularjsjsonng-show
raj
raj

Reputation: 388

ng-Show records of table on condition

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

records of auto type

records of live type

I want all of them when i toggle autolive

Upvotes: 0

Views: 763

Answers (2)

tanmay
tanmay

Reputation: 7911

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

Upvotes: 1

Sachet Gupta
Sachet Gupta

Reputation: 837

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

Upvotes: 1

Related Questions