ng hide and ng show in AngularJS



In this video we will discuss ng-hide and ng-show directives in Angular with examples

ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us understand this with an example

When Hide Salary checkbox is checked, the Salary column should be hidden, when it is unchecked the Salary column should be unhidden

Script.js : The controller function builds the model

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;
});

HtmlPage1.html : Notice ng-model directive on the checkbox is set to hideSalary. hideSalary variable is then used as the value for ng-hide directive on the th and td elements that displays Salary. When the page is first loaded, hideSalary variable will be undefined which evaluates to false, as a result Salary column will be visible. When the checkbox is checked, hideSalary variable will be attached to the $scope object and true value is stored in it. This value is then used by the ng-hide directive to hide the salary td and it’s th element. When the checkbox is unchecked, false value is stored in the hideSalary variable, which is then used by the ng-hide directive to display the Salary column.

[!DOCTYPE html]
[html xmlns=”
[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]
[/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]

The following example masks and unmasks the Salary column values using ng-hide and ng-show directives, depending on the checked status of the Hide Salary checkbox.

[!DOCTYPE html]
[html xmlns=”
[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]

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Nguồn: https://millionwordsite.com/

Xem thêm bài viết khác: https://millionwordsite.com/giai-tri/

24 thoughts on “ng hide and ng show in AngularJS

  1. sir please give video on below topic-

    1.Highchart in angular 8 how use
    2.Ag Grid in angular 8
    3.NGRX advance thing
    4.RXJS operator
    5.Angular material
    6.Flex
    7.angular CDK

  2. Which angular package u have installed.. I am trying to bind values into table but it's not binding it..

  3. How to do
    Horizontal ng-repeat(er) with new row breaks
    if I have a list [1,2,3,4]
    I want to display on HTML Table consists of 2 rows and 2 columns 1 2
    3 4
    Very important please any help

  4. At 6:10, no need to use:

    <th ng-hide="hideSalary">Salary</th>
    <th ng-show="hideSalary">Salary</th>

    in <thead> tag. Since 'Salary' heading needs to be displayed all the time.

    Instad just use:
    <th>Salary</th>

  5. I learnt full programming frm ur videos like mvc4,jquery,asp.net, wcf, could u please post web api in mc4 videos

  6. usually i dont like online video tutorials but iam obsessed with your explanation skills even small kids will learn ajs by just viewing this tutorial

  7. suuuuuuuuuuuuuuuuppeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrr, i have lost money on angular js course which is not even 10% of your explanation sir

  8. Suggestion:
    It was not necessary to use ng-hide and ng-show directive for the table head "Salary".
    But great tutorial, thank you so much.

  9. Thanks guys, Really amazing videos… Cover many things from starting and really helpful to start any angular project with full of confidence…

Leave a Reply

Your email address will not be published. Required fields are marked *