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>
热门推荐
10 职场离职文案祝福语简短
11 入伙英文祝福语大全简短
12 中秋祝福语送朋友简短
13 许愿星姐妹祝福语简短
14 妹妹生日祝福语简短唯美
15 女神节日简短祝福语大全
16 女朋友考试祝福语简短
17 车行销售祝福语简短
18 朋友花篮开业祝福语简短