AngularJS ngShow和ngHide
示例
该ng-show指令根据传递给它的表达式是true还是false来显示或隐藏HTML元素。如果表达式的值是伪造的,则它将隐藏。如果是事实,它将显示出来。
该ng-hide指令是相似的。但是,如果该值是伪造的,它将显示HTML元素。当表达真实时,它将隐藏它。
工作JSBin示例
控制器:
var app = angular.module('app', []); angular.module('app') .controller('ExampleController', ExampleController); function ExampleController() { var vm = this; //将用户名绑定到HTML元素 vm.username= ''; //使用者名称 vm.taken_username= 'StackOverflow'; }
视图
<section ng-controller="ExampleController as main"> <p>Enter Password</p> <input ng-model="main.username" type="text"> <hr> <!-- Will always show as long as StackOverflow is not typed in --> <!-- The expression is always true when it is not StackOverflow --> <div style="color:green;" ng-show="main.username != main.taken_username"> Your username is free to use! </div> <!-- Will only show when StackOverflow is typed in --> <!-- The expression value becomes falsy --> <div style="color:red;" ng-hide="main.username != main.taken_username"> Your username is taken! </div> <p>Enter 'StackOverflow' in username field to show ngHide directive.</p> </section>