ngShow 和 ngHide

ng-show 指令根据传递给它的表达式是 true 还是 false 来显示或隐藏 HTML 元素。如果表达式的值是假的，那么它将隐藏。如果它是真的那么它会显示。

ng-hide 指令类似。但是，如果值为 falsy，则会显示 HTML 元素。当表达式真实时，它会隐藏它。

使用 JSBin 示例

控制器 ：

var app = angular.module('app', []);
  
angular.module('app')
  .controller('ExampleController', ExampleController);
 
function ExampleController() {
  
  var vm = this;
  
  //Binding the username to HTML element
  vm.username = '';
  
  //A taken 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>