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>