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>