Sorting information by class titles in AngularJS

Question

Sorting information by class titles in AngularJS

Working with angularjs, take a look at my view code :

<div style="width:70px;">
                               Show Online <input type="checkbox" ng-model="showonline" />
                            </div>

<div ng-repeat="user in users|filter:showonline">
<span type="button" class="{(isOnline()) ? 'available' : 'unavailable'}">user.id</span>
</div>

The snippet above will output HTML like the following within the div containing ng-repeat:

<span type="button" class="available">111</span>
<span type="button" class="available">121</span>
<span type="button" class="unavailable">88</span>
<span type="button" class="available">878</span>

The classes are applied based on the online status of each user. By default, it displays all elements with the "available" and "unavailable" classes. I aim to implement a checkbox as a filter to selectively display elements by their class name (checking the box should only show "available" users). When unchecked, both "available" and "unavailable" elements should be visible. I am familiar with filtering data in angularjs but unsure how to filter by classname using a checkbox. How can I achieve this?

javascript angularjs

Answer 1

Answer №1

If you want to display the available users, consider adding a new variable called showAvailable to your scope. I also recommend including an additional parameter in the object named isOnline to avoid repetitive checks.

To implement this, add the following code snippet to your HTML:

ng-show="!showAvailable || user.isOnline"

Check out this demonstration:

function TodoCrtl($scope) {

  $scope.users = [{
    userid: 1,
    isOnline: true
  }, {
    userid: 2,
    isOnline: false
  }, {
    userid: 3,
    isOnline: true
  }]
  this.name = "AngularJS";
  $scope.showAvailable = false;

}

h1,
p {
  font-family: Lato;
}

.available {
  background-color: green;
  width: 100px;
  height: 100px;
}

.unavailable {
  background-color: red;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCrtl">
    <div ng-repeat="user in users|filter:showonline">
      <span type="button" ng-show="!showAvailable || user.isOnline" ng-class="user.isOnline ? 'available' : 'unavailable'">{{user.userid +' '+ (user.isOnline ? 'available' : 'unavailable')}}</span>
    </div>
    Show Available only: <input type="checkbox" ng-model="showAvailable" />
    
  </div>
</div>

Answer 2

If you want to display the available users, consider adding a new variable called showAvailable to your scope. I also recommend including an additional parameter in the object named isOnline to avoid repetitive checks.

To implement this, add the following code snippet to your HTML:

ng-show="!showAvailable || user.isOnline"

Check out this demonstration:

function TodoCrtl($scope) {

  $scope.users = [{
    userid: 1,
    isOnline: true
  }, {
    userid: 2,
    isOnline: false
  }, {
    userid: 3,
    isOnline: true
  }]
  this.name = "AngularJS";
  $scope.showAvailable = false;

}

h1,
p {
  font-family: Lato;
}

.available {
  background-color: green;
  width: 100px;
  height: 100px;
}

.unavailable {
  background-color: red;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCrtl">
    <div ng-repeat="user in users|filter:showonline">
      <span type="button" ng-show="!showAvailable || user.isOnline" ng-class="user.isOnline ? 'available' : 'unavailable'">{{user.userid +' '+ (user.isOnline ? 'available' : 'unavailable')}}</span>
    </div>
    Show Available only: <input type="checkbox" ng-model="showAvailable" />
    
  </div>
</div>

Sorting information by class titles in AngularJS

Answer №1

Similar questions

The Next.js developer encounters an issue where the build fails due to a ReferenceError on a client component, stating that "window

Having difficulty launching a new window within an app built with Electron and Nexjs (Nextron)

Trigger an Ajax function using a button within a Bootstrap modal

Encountering the issue: receiving an error message stating that shuffle(...) is undefined within

Execute a node script file at random intervals

displaying the local path when a hyperlink to a different website is clicked

Using Gmail in conjunction with Heroku for email delivery

Preventing the form from being enabled by default when using 'ng-model'

SOLVED: NextJS restricts plugins from modifying HTML to avoid unnecessary re-rendering

Step-by-step guide to showing the contents of every file in a directory on the console using node.js or express

In AngularJS, the process of replacing text using a filter can be achieved by following

Discovering a specific property of an object within an array using Typescript

Troubleshooting the Autocomplete Problem in Kendo UI AngularJS with ngMap

When attempting to submit form data, req.file returns as undefined

Is there a way to capture the input from the text box and store it in the local storage?

Restricting the Vue for-loop results to display only the current item in use

I am currently experiencing difficulties with loading files in Magento even though they are present on the server

Is there a way to transfer the chosen maximum and minimum price values to a JavaScript function within a select tag in HTML?

Suggestions for organizing files

Conceal specific pages within the DataTable without deleting them