Millionwordsite - Tin tức tổng hợp cho mọi đối tượng siêu hot
  • Home
  • Công Nghệ
No Result
View All Result
Tuesday, August 9, 2022
  • Home
  • Công Nghệ
No Result
View All Result
Millionwordsite - Tin tức tổng hợp cho mọi đối tượng siêu hot
No Result
View All Result

ng hide and ng show in AngularJS

admin by admin
July 3, 2020
in Giải Trí
24
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/

Xem thêm Bài Viết:

  • Truyện Ngắn MỘT ĐÊM SAY – Nghe Đọc Truyện Đêm Khuya – Giọng Đọc Việt Hùng
  • #3 Hồi ký – Mùa chinh chiến ấy – Đọc truyện dài kỳ VOV
  • hai người nói chuyện tiếu lâm nhất trên đời
  • Tuyển Tập Truyện Cười Ngắn Hỏi Xoáy Đáp Xoay ❤️ Truyện Cười Tiếu Lâm siêu ngắn
  • Những Câu Chuyện Cổ Tích Ru Bé Ngủ Ngon
Previous Post

Hiệp Sĩ Mặt Nạ Kiva Tập 1 : Thức Tỉnh Hiệp Sĩ Quỷ (Siêu Nhân Tiểu Quỷ)

Next Post

Mặt kính Sapphire không hề hoàn hảo như bạn nghĩ - Xchannel

Next Post
Mặt kính Sapphire không hề hoàn hảo như bạn nghĩ – Xchannel

Mặt kính Sapphire không hề hoàn hảo như bạn nghĩ - Xchannel

Comments 24

  1. GOVIND MISHRA says:
    2 years ago

    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

    Reply
  2. Mihajlo Ilic says:
    2 years ago

    Cool tutorial man 🙂 , I like it!

    Reply
  3. pranali gadlinge says:
    2 years ago

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

    Reply
  4. rot rose says:
    2 years ago

    Amazing tutorial! Thank you!

    Reply
  5. Hari Shyam Sharma says:
    2 years ago

    your vidoes is very helpful……

    Reply
  6. xxx xxx says:
    2 years ago

    great explanation

    Reply
  7. Aya Youssef says:
    2 years ago

    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

    Reply
  8. Harsh Araple says:
    2 years ago

    great tutorial ever 😀

    Reply
  9. Karan Malhotra says:
    2 years ago

    Good one (y)

    Reply
  10. Movie Lover says:
    2 years ago

    can u have make a button with it like toggle or something modal with hide and show directive

    Reply
  11. Rama Krishna Hanuman Gudivada says:
    2 years ago

    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>

    Reply
  12. Nabil Berrada says:
    2 years ago

    thx m8

    Reply
  13. Mohammed el amine Rahiq says:
    2 years ago

    thanks a lot

    Reply
  14. Dhananjay Pandey says:
    2 years ago

    Nice men…it is so easy to learn and thanks for providing such videos ..thanks a lot 🙂

    Reply
  15. Anver Sadat says:
    2 years ago

    Really helpful video. I am learning angular Js from here. thanks to posting your video.!

    Reply
  16. persistence j says:
    2 years ago

    Your Tutorials are so helpful to the beginners … Thanks a lot

    Reply
  17. mahender kavati says:
    2 years ago

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

    Reply
  18. hemanth kumar says:
    2 years ago

    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

    Reply
  19. hemanth kumar says:
    2 years ago

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

    Reply
  20. Nechar Joshi says:
    2 years ago

    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.

    Reply
  21. Mitul Shah says:
    2 years ago

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

    Reply
  22. Mohit Jain says:
    2 years ago

    Thanks

    Reply
  23. Husam Kibro says:
    2 years ago

    Thanks, this is exactly what I need

    Reply
  24. bhargav kurapati says:
    2 years ago

    its really helpful.. thanks

    Reply

Leave a Reply Cancel reply

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

Xem Thêm

(13) Sắp xếp một cơ sở dữ liệu nhờ tệp chỉ số – Bùi Thế Tâm

(13) Sắp xếp một cơ sở dữ liệu nhờ tệp chỉ số – Bùi Thế Tâm

July 14, 2020
[CodeGym's tutorial video] Bài 1.21: SQL Query (Câu lệnh truy vấn SQL)

[CodeGym's tutorial video] Bài 1.21: SQL Query (Câu lệnh truy vấn SQL)

July 8, 2020
[Giải bài tập lập trình C/C++] Sắp xếp các số nguyên tố trong mảng 1 chiều tăng dần

[Giải bài tập lập trình C/C++] Sắp xếp các số nguyên tố trong mảng 1 chiều tăng dần

July 14, 2020
[PASCAL Bá Đạo] Tập 21 P5/5 Sắp xếp mảng theo thứ tự tăng dần

[PASCAL Bá Đạo] Tập 21 P5/5 Sắp xếp mảng theo thứ tự tăng dần

July 13, 2020
[Review Đồng Hồ] Seiko Presage SARX033 – Baby Grand Seiko | ICS Authentic

[Review Đồng Hồ] Seiko Presage SARX033 – Baby Grand Seiko | ICS Authentic

July 9, 2020
[Thủ thuật máy tính] Hướng dẫn quản lý file và thư mục Hiệu Quả Siêu Nhanh

[Thủ thuật máy tính] Hướng dẫn quản lý file và thư mục Hiệu Quả Siêu Nhanh

July 15, 2020
  • Liên Hệ
  • Chính Sách Bảo Mật

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Home
  • Công Nghệ

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.