星空网 > 软件开发 > Java

Part 14 ng hide and ng show in AngularJS

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.

Part 14 ng hide and ng show in AngularJS

When it is unchecked the Salary column should be unhidden
Part 14 ng hide and ng show in AngularJS

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 ="http://www.w3.org/1999/xhtml"><head>  <title></title>  <script src='/images/loading.gif' data-original="Scripts/angular.min.js"></script>  <script src='/images/loading.gif' data-original="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>

With the above example we can also use ng-show directive instead of ng-hide directive. For this example to behave the same as before, we will have to negate the value of hideSalary variable using ! operator.

 

 <!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head>  <title></title>  <script src='/images/loading.gif' data-original="Scripts/angular.min.js"></script>  <script src='/images/loading.gif' data-original="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-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-show="!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.


Part 14 ng hide and ng show in AngularJS

Part 14 ng hide and ng show in AngularJS

<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head>  <title></title>  <script src='/images/loading.gif' data-original="Scripts/angular.min.js"></script>  <script src='/images/loading.gif' data-original="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>

 




原标题:Part 14 ng hide and ng show in AngularJS

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

opencart独立站:https://www.goluckyvip.com/tag/23575.html
opencart独立站如何推广:https://www.goluckyvip.com/tag/23576.html
OpenLinkProfiler:https://www.goluckyvip.com/tag/23578.html
openpay:https://www.goluckyvip.com/tag/23579.html
台风“白鹿”:https://www.goluckyvip.com/tag/2358.html
OpenPhoto:https://www.goluckyvip.com/tag/23580.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流