angularjs入门-ng-show,ng-hide,ng-if

其实这三个directive很像，用法也大同小异，ng-if是会动态增减元素，ng-show和ng-hide则是把元素显示和隐藏而已，只是用隐藏的方式隐藏起来，就像jquery的$.show()和$.hide()的概念，使用上其实也非常简单，建立一个ng-repeat来说明，我现在只想显示people，其余非人类的全部默认就都不存在，那我就可以使用ng-if的方式，我们也可以想成就像在view上面写if的感觉，如下例子

    
    
  
  


    
  
  

        
   
   

            
    
    
{{item.name}}-{{item.animalType}}
        
   
   
    
  
  
    
    



    

我们也可以直接在js档里面去写，如下例子

    
  
  

        
   
   

            
    
    
{{item.name}}-{{item.animalType}}
        
   
   
    
  
  
    
    

接着我们来示范一下ng-show和ng-hide的用法，现在假设我们按一下按钮，就能隐藏数据，再按一下就能显示数据，特别注意一下ng-show=!displayAnimal可以改成ng-hide=displayAnimal

    
  
  

        
   
   
        
   
   

            
    
    
{{item.name}}-{{item.animalType}}
        
   
   
    
  
  
    
    

现在假设一下，我们有三颗颗按钮，一颗是人类，一颗是狗，一颗是老鼠，按了人类只显示人类的数据，反之则显示动物，以下是例子

    
  
  

        
   
   
        
   
   
        
   
   
        
   
   

            
    
    
{{item.name}}-{{item.animalType}}
        
   
   
    
  
  
    
    

以上再请大家多多指教

原文:大专栏  angularjs入门-ng-show,ng-hide,ng-if