AngularJs基础用法

AngularJS 是一个 JavaScript 框架。它可通过

image.png

ng-repeat 循环遍历数组或者对象

        

            

              {{ x }}
            
        
    

image.png

    

        

            

              {{ x.name + ',' + x.country }}
            
        
    

image.png

ng-bind 绑定元素

image.png

ng-show 属性返回 true 的情况下显示

    

        
魏萍萍
        
萍萍魏
    

image.png

---

AngularJs Scope作用域

ng中scope是应用在html和js之间的纽带
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

在ng创建控制器时，可以将$scope对象当作参数传递

    

        
{{ name }}
    

image.png

如果修改了视图，模型和控制器也会相应更新

    

        
{{ name }}
        
{{ greeting }}
        点击一下
    

image.png

image.png

$rootScope根作用域

$rootScope可用于整个应用中，是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用

    

       

           
{{ x }}------{{ lastname }}
       
    

image.png

---

AngularJs过滤器

ng中过滤器可以使用管道字符（ | ）添加到表达式和指令中

AngularJs中提供了几种内置的过滤方法

currency 将数字格式化为货币格式
filter 从数组中选择一个子集
lowercase 格式化字符串为小写
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写

currency

    

       
       
       
总价：{{ (quantity*price) | currency  }}
    

image.png

uppercase lowercase

    

       
{{ firstname | uppercase }}
       
{{ firstname | lowercase }}
    

image.png

orderBy根据表达式的首字母排列数组

    

     

         

             {{ x.name + ',' + x.country }}
         
     
    

image.png

自定义过滤器

    

       
{{ msg }}
       
{{ msg | reserve }}
    

image.png