AngularJS 内置指令

AngularJS 内置指令

凡是以 ng- 开始的都成为内置指令

1. 用于表示一个angular应用, Angular 会从ng-app所在的标签开始,管理这个应用.
2. 一个页面(应用)中,建议只存在一个ng-app ,如果有多个,需要手动对应的应用.

ng-init: 初始化数据

ng-init="a=b;c=d;..." 挂载在根上 开发正式项目时,不建议使用ng-init 做数据初始化 应该交由controller去完成 (也可以声明数组和对象)

ng-model:模块

ng-model:将(表单)视图与模型进行(双向)绑定, 其中一个改变另一个相应发生改变 做到动态变化

ng-repeat: 遍历对象

遍历数组: ng-repeat="x in arr"
遍历对象: ng-repeat="(key,val) in obj"
属性:$first 是否为第一项,$last 是否为最后一项, $middle 是否为中间值(非首和尾), $index下标值

***angular需要一个不重复的值去跟踪数据的变化, 当数组内有重复时,将导致angular无法正常跟踪对应的值, 需要使用 track by $index 为遍历指定一个唯一不重复值

  //注意点1
    
        
        
        
        
        
        
    
    
        //ng-init初始化数据
        

            
            
            

                
{{ x }}
//遍历数组
            
            
{{ key +"-"+ val}}
遍历对象
            

                
{{x+"-"+$first+"-"+$last+"-"+$middle+"-"+$index}} 
            
            
{{item.name+"-"+item.price}} 

            
{{x}}
        
    
```

####ng-class 为元素指定样式名
1. ng-class="{true:'class1',false:'class2'}[bol]" 由 bol 决定添加哪个样式
2. ng-class = "{'class1':bol1,'class2':bol2,'classN':bolN}"由各个变量 是否添加指定的样式
####ng-style 委员书添加样式
    示例:ng-style="{style:style}"
 ng-show 是否显示元素 true显示 false隐藏
ng-show 为false时, 只是为元素添加一个优先级最高的disp:none
ng-if 是否显示元素  ng-if 为false时 ,会将元素从DOM树中 移除 当元素需要反复显示隐藏时 , 使用ng-show   当只显示一次便不在使用的元素,使用ng-if

 ng-click 单机事件 (所有的DOM标准事件都是这种形式书写)
 ng-bind  可以解决{{}}表达式造成的原样输出问题(后引入脚本)