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 祝福语驱散霉运的话简短