Concealing specific elements in Angular by utilizing ng-class conditions

Question

Concealing specific elements in Angular by utilizing ng-class conditions

Here's the code snippet I am currently working with:

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

The ng-class is functioning as expected based on the object provided. The output is as desired.

However, my goal is to have the ng-class value of inactive hidden initially. Upon clicking a button, it should toggle visibility - displaying only active fields when clicked again. Essentially, I want a toggle functionality for this.

I attempted the following:

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

While this displays only active elements, I am unsure how to proceed with showing inactive upon button click.

The state of inactive should remain constant. Clicking a button labeled showall will display it, while clicking the active button will hide it, leaving only active elements visible.

As a newcomer to Angular, I'm seeking guidance on an easier approach to achieve this functionality. Any suggestions would be greatly appreciated.

Thank you in advance.

javascript angularjs

Answer 1

Answer №1

To make this work, you need to follow these steps. First, in the controller, define a status property:

$scope.status = {
    active: true
};

Next, in your HTML code, add the following snippet:

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

For the "Show All" and "Active" buttons, use the following configuration:

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

Check out the live demo here: http://plnkr.co/edit/BjiLYjPJG8yPBH1ysf7p?p=preview

Answer 2

To make this work, you need to follow these steps. First, in the controller, define a status property:

$scope.status = {
    active: true
};

Next, in your HTML code, add the following snippet:

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

For the "Show All" and "Active" buttons, use the following configuration:

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

Check out the live demo here: http://plnkr.co/edit/BjiLYjPJG8yPBH1ysf7p?p=preview

Answer 3

Answer №2

Substitute

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

with

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

and insert this into your controller. Assuming your function showall() assigns a model variable $scope.showAll to true for "show all" and false otherwise.

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

Answer 4

Substitute

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

with

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

and insert this into your controller. Assuming your function showall() assigns a model variable $scope.showAll to true for "show all" and false otherwise.

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

Concealing specific elements in Angular by utilizing ng-class conditions

Answer №1

Check out the live demo here: http://plnkr.co/edit/BjiLYjPJG8yPBH1ysf7p?p=preview

Answer №2

Similar questions

How to apply background-color to a div element with ng-repeat directive?

Cover any HTML element with a translucent overlay box

After upgrading to react native version 0.73, the user interface freezes and becomes unresponsive when working with react-native-maps

Mistakes encountered when compiling TypeScript Definition Files

How can the md-sidenav be automatically opened when a specific ui-router state is loaded, without being locked in the open

The "click" event is only effective for a single use

Javascript does not have the capability to interact directly with HTML code

Steps for opening a URL in a modal:

Issue: Unable to 'locate' or 'access' ./lib/React folder while utilizing webpack

Send Symfony2 form data via AJAX

What is the process for including a static file on an http server?

Latest Information Regarding Mongodb Aggregate Operations

What steps are needed to link my Javascript application with Amazon Keyspaces?

Guide to conducting Protractor testing with md-option

$stateParams is not being properly defined when passed to the controller

Why am I encountering difficulties connecting to the Socket IO object in Node.js using Express?

Implementing Node.js with browser cache and handling 304 responses

The deleteCell function will not properly function when directly targeting selected table rows (trs)

The concept of nested ng-repeat in AngularJS

Retrieve information from a controller and pass it to a Component in AngularJs