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.

http://stackoverflow.com/questions/12599637/angularjs-ng-show-ng-hide — 4EACH, Oct 10 '14 at 11:42
If you hide those elements wouldn't it be better to just filter and display the elements active or inactive? — maurycy, Oct 10 '14 at 11:43
`inactive` are hidden always or only before click? and after click they are still `inactive`? — dfsq, Oct 10 '14 at 11:45
`inactive` will be `inactive` always. On click on a button say 'all' it shows up, on button click `active` it hides. — batman, Oct 10 '14 at 11:46
No what I'm asking here is different. :( I know `ng-show`/`ng-hide`, but that doesnt work here. — batman, Oct 10 '14 at 11:56

score 2 · Accepted Answer · answered Oct 10 '14 at 11:57

2

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

answered Oct 10 '14 at 11:57

dfsq

191,768
25
236
258

Thanks thats brilliant. It works. Can you explain me whats exactly happening with filer? Because `filter:status` does return `true` for call cases right? – batman Oct 10 '14 at 12:30
`status` is variable object. `filter` accepts it and filters array by properties in this `status` object. When `status={active: true}` it means that filter will only show elements where `active` property is `true`. When you set `status=null` it means no filtering at all. – dfsq Oct 10 '14 at 12:49

score 0 · Answer 2 · answered Oct 10 '14 at 11:58

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

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

2 Answers2

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