Will discuss ng-hide and ng-show directives in Angular:
Controler:
Controler:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employees = [
{ name: "Ben", gender: "Male", city: "London", salary: 55000 },
{ name: "Sara", gender: "Female", city: "Chennai", salary: 68000 },
{ name: "Mark", gender: "Male", city: "Chicago", salary: 57000 },
{ name: "Pam", gender: "Female", city: "London", salary: 53000 },
{ name: "Todd", gender: "Male", city: "Chennai", salary: 60000 }
];
$scope.employees = employees;
});
Html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<input type="checkbox" ng-model="hideSalary" />Hide Salary
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th ng-hide="hideSalary">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender}} </td>
<td> {{ employee.city}} </td>
<td ng-hide="hideSalary"> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
If you need to masks (####) and unmasks the Salary column values using ng-hide and ng-show directives, depending on the checked status of the Hide Salary checkbox
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<input type="checkbox" ng-model="hideSalary" />Hide Salary
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th ng-hide="hideSalary">Salary</th>
<th ng-show="hideSalary">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender}} </td>
<td> {{ employee.city}} </td>
<td ng-hide="hideSalary"> {{ employee.salary }} </td>
<td ng-show="hideSalary"> ##### </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No comments:
Post a Comment