How to hide certain elements in angular, based on the ng-class?

Question

I have following code:

<tr ng-repeat="version in allVersions" ng-class="{{ version['active'] == 'true' ? 'active' : 'inactive' }}">
 </tr>

I'm creating the ng-class based on the object and its working fine. I'm getting the expected output.

But what I want here is, ng-class whose value is inactive need to be hidden initially. On the click of a say button, it need to be shown. Basically like a toggle button, again if clicked, shows only active fields.

I tried this:

<tr ng-repeat="version in allVersions" ng-class="{{ version['active'] == 'true' ? 'active' : 'inactive' }}" ng-show="version['active'] == 'true'">
     </tr>

which is showing only active , but doesnt know how to proceed, if I want to show inactive on the button click.

inactive will be inactive always. On click of a button say showall it shows up, on button click active it hides, only active class are shown here.

New to angular, is there any easy to do this?

Thanks in advance.

Answer 1

You can do it like this. In controller set this status property:

$scope.status = {
    active: true
};

And in HTML:

<tr ng-repeat="version in allVersions | filter:status" ng-class="[version.active ? 'active' : 'inactive']">

Then "Show All" and "Active" buttons could be configured this way:

<button ng-click="status = null">Show all</button>
<button ng-click="status = {active: true}">Active</button>
<button ng-click="status = {active: false}">Inactive</button>

Demo: http://plnkr.co/edit/BjiLYjPJG8yPBH1ysf7p?p=preview

Answer 2

Replace

ng-show="version['active'] == 'true'"

with

ng-show="show(version['active'])"

and add this to your controller. This assumes your showall() function sets a model variable $scope.showAll to true for "show all" and false for otherwise.

$scope.show = function(active) {
    return $scope.showAll || active;
}