The way to hide or show a particular record in a table is similar to what is used to hide or show any elements of the DOM. The basic and the first thing that comes to mind is the ng-show and ng-hide directives which show or hides respectively based on binary results of the expressions bound to them. Another way can be the use of
ng-if which works like an if block in general programming. If the expression is true the element is visible or not.
Controlling this can be easily done by the ng-click command which can be used to call a function or run a piece of code that manipulates the entities present in the boolean expressions.
Approach 1: Here the tr element is visible only if the expression bound to the ng-show is true.
Here ng-hide is commented out in the example but it works in the same way ng-show. The difference is that it hides the tr element if the boolean expression gives a true value.
The ng-show and ng-hide directives both can have general function calls but they should return a boolean value.
< tr ng-repeat="x in [some list]" ng-show="[some boolean expression]" > < tr > < tr ng-repeat="x in [some list]" ng-hide="[some boolean expression]" > < tr >
- When the “Show People Present” is clicked the boolean is true for all objects whose attended value matches the flag value as it is changes to 1 by call from ng-click:
- When the “Show People Absent” is clicked the boolean is true for all objects whose attended value matches the flag value as it is changes to 0 by call from ng-click:
Approach 2: Here we use the ngIf to show or hide records of the table. The code remains the same as the work is nearly the same. But ngIf is less reliable than ng-show or ng-hide but what it does is that it removes the elements from the DOM completely.
< tr ng-repeat="x in [some list]" ng-if="[some boolean expression]" > < tr >
- Output remains the same as they both work in the same way:
- How to find record using any key-value pair information of record in your local/custom database using Node.js ?
- jQuery | Hide/Show, Toggle and Fading methods with Examples
- How to display icon next to show/hide text on button?
- How to Show and Hide div elements using radio buttons?
- How to Show and Hide div elements using Checkboxes ?
- Define ng-if, ng-show and ng-hide
- How to Hide and show slide arrows in slick slider?
- How to show/hide div element depending multiple values using Bootstrap and jQuery ?
- How to show/hide data when the particular condition is true in AngularJS ?
- How to show/hide dropdown menu on mouse hover using CSS ?
- How to hide the checkbox based on value in jQuery ?
- How to show contents of selected row of a table in Bootstrap model using jQuery ?
- Difference between Preemptive Priority based and Non-preemptive Priority based CPU scheduling algorithms
- Difference between Memory based and Register based Addressing Modes
- Introduction of Graduate Record Examinations (GRE)
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.