How to hide or show one record from an ng-repeat within a table based on ng-click?
Last Updated :
18 Oct, 2019
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.
Syntax:
< 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 >
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
Angular show hide table element on click
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<div ng-app="mainApp" ng-controller="MyCtrl">
<button ng-click="showPresent()">
Show People Present
</button>
<button ng-click="showAbsent()">
Show People Absent
</button>
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<!-- The next two lines are interchangeable -->
<!-- <tr ng-repeat="p in people" ng-hide="p.attended!=flag"></tr> -->
<tr ng-repeat="p in people" ng-show="p.attended==flag">
<td>{{p.name}}</td>
<td>{{p.Age}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module("mainApp", []);
app.controller("MyCtrl", function($scope) {
$scope.flag = 1;
$scope.people = [{
name: "GeekAgashi",
Age: 12,
attended: 1
}, {
name: "GeekSatoshi",
Age: 16,
attended: 0
}, {
name: "GeekNakumato",
Age: 14,
attended: 1
}];
$scope.showPresent = function() {
$scope.flag = 1;
};
$scope.showAbsent = function() {
$scope.flag = 0;
};
});
</script>
</body>
</html>
- 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.
Syantax:
< tr ng-repeat="x in [some list]" ng-if="[some boolean expression]" > < tr >
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>Angular show or hide element on click</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<div ng-app="mainApp" ng-controller="MyCtrl">
<button ng-click="showPresent()">
Show People Present
</button>
<button ng-click="showAbsent()">
Show People Absent
</button>
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<!--The main change in the code is in the next line-->
<tr ng-repeat="p in people"
ng-if="p.attended==flag">
<td>{{p.name}}</td>
<td>{{p.Age}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module("mainApp", []);
app.controller("MyCtrl", function($scope) {
$scope.flag = 1;
$scope.people = [{
name: "GeekAgashi",
Age: 12,
attended: 1
}, {
name: "GeekSatoshi",
Age: 16,
attended: 0
}, {
name: "GeekNakumato",
Age: 14,
attended: 1
}];
$scope.showPresent = function() {
$scope.flag = 1;
};
$scope.showAbsent = function() {
$scope.flag = 0;
};
});
</script>
</body>
</html>
- Output remains the same as they both work in the same way:
Similar Reads
How to access index of the parent ng-repeat from child ng-repeat in AngularJS ? In this article, we will see How to access the index of the parent ng-repeat from child ng-repeat in AngularJS.In AngularJS applications, when we implement the nested ng-repeat directives and if we need to access the index of the parent ng-repeat from the child ng-repeat, then we can do this by usin
5 min read
How to delete an item or object from the array using ng-click ? The task is to delete the item from the list when the button is clicked. This all should be done by using ng-click. This is done by using the splice() method. The syntax for the method is given below. Syntax for splice() function: array.splice(indexno, noofitems(n), item-1, item-2, ..., item-n) Exam
2 min read
How to Delete a Row from Table using AngularJS ? Given a HTML table and the task is to remove/delete the row from the table with the help of AngularJS.Approach: The approach is to delete the row from the array where it stored and served to the table data. When the user clicks on the button near to the table row, it passes the index of that table a
2 min read
How to fetch the details using ng-repeat in AngularJS ? In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angul
2 min read
How to fetch the details using ng-repeat in AngularJS ? In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angul
2 min read
How to fetch the details using ng-repeat in AngularJS ? In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angul
2 min read