AngularJS改变元素的显示状态

前言

本文介绍利用NG显示和NG隐藏AngularJS提供的自动监控一个布尔变量来改变元素的显示状态指示。

有N个控制HTML元素的显示和隐藏方法：隐藏的HTML，CSS隐藏显示，（）和（）的jQuery，隐藏的引导。今天的重点不在显示和隐藏，但听一个布尔变量值，自动改变显示和隐藏的元素状态监控功能，如果判断，选择DOM建立DOM，5行代码是不固定的，并没有什么技术含量。

例1




字串1
字串2
转换




功能visiblecontroller（范围）{
scope.visible美元= false；
（$ scope.toggle =功能）{
scope.visible美元=！scope.visible美元；
}
}






这两个指令很简单，但NG显示是真的，隐藏在false，而NG隐藏有相反的效果。

上下文敏感菜单，工具，和许多其他情况下，显示和隐藏的元素是一个核心功能。像Angualr的其他功能，角驱动UI刷新修改数据模型，再换到UI的指令。

NG和NG两个指令的功能是等价的，但运行效果正好相反。我们可以根据传递的表达式显示或隐藏元素，也就是说，NG显示在表达式为true时将显示元素，当隐藏false时元素将被隐藏，而NG隐藏正好相反。

工作原理

这两个指令的工作原理是将元素的样式设置为显示：块根据实际情况显示元素，并将其设置为显示：不隐藏元素。

例2



切换菜单

打昏
瓦解
从历史中抹去




VaR MyApp = angular.module（'myapp，{ }）myapp.controller（'showcontroller功能（范围）{ $范围。menustate = {显示：假} $范围。togglemenu =功能（{ $范围。menustate。表明美元=）范围。menustate。秀；} }！）；




以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！