Angular JS（1）

1、表达式

    


    {{ 5*4 }}
    {{ 5>4?"真":"假"}}
    
{{name +"--"+age}}
    
    *
    
    =
    {{one*two}}

2、内置指令

凡是以ng- 开始的，都称为内置指令
ng-app 用于表示一个angularjs应用
Angular会从ng-app所在的标签开始，管理这个应用
一个页面（应用）中，建议只存在一个ng-app
如果有多个，需要手动启动对应的应用
目前ng-app=" "表示使用默认的angular 应用
ng-init='a=b;c=d;...';
使用 ng-init 初始的数据，会挂载到根作用域
在开发正式项目时，不建议使用ng-init做数据初始化
应该交由controller去完成
ng-model 将（表单）视图与模型进行（双向）绑定
ng-repeat 遍历对象
遍历数组：ng-repeat="x in arr"
遍历对象：ng-repeat=" (key,val) in obj"
属性： $first 是否是第一项
$last 是否是最后一项
$middle 是否是中间项
$index 下标值
track by $index Angular需要一个不重复的值去跟踪数据的变化，当数组内有重复时，将导致angular 无法正常跟踪对应的值，需要使用track by $index 为遍历指定一个唯一不重复的值。
ng-class为元素指定样式名
ng-class="{true:'class1',false:'class2'}[bol]" 由 Bol 决定添加哪个样式
ng-class="{'class1':bol1,'class2':bol2,'classN':bolN}"由各个变量决定是否添加指定的样式
ng-style 为元素添加样式
ng-style=" { style1:'style',...}"
ng-show是否显示元素，true显示，false隐藏
ng-show 为 false 时，只是为元素添加一个优先级最高的 display:none;
ng-if 是否显示元素
ng-if 为 false 时，会将元素从DOM 树种移除
当元素需要反复显示隐藏时，使用 ng-show
当元素只显示一次后就不再使用时，使用ng-if
ng-click 单击事件
ng-mouseover...dom的标准事件的写法
ng-bind 将模型输出到页面，后引入脚本时可以解决{{ }}造成的原样输出问题

  .box{width:100px;height:100px;background: red;}
        .box1{border:1px solid}
        .box2{border-radius: 5px;}
        .box3{box-shadow: 2px 2px 5px black}


    
        box1
        box2
    
    

    


    

    


    显示/隐藏

     显示、隐藏 
    
1
    
    
2

    
{{ isShow }}
    


    {{html}}
    

    

3、Controller

angular.module( moduleName[,depends(可选参数)]) 创建或获取模块
moduleName ：模块名称
depends： 依赖的其它模块 Array
当只传入一个名称时，代表获取指定的模块
两个参数时，定义模块，即使不依赖其它模块，也要传入一个空的数组

   var app = angular.module("myApp",[]);
    //推断式注入
    app.controller("myController",function($scope){
        $scope.name="sun";
    });
    //声明式注入（建议一律使用这种方式，代码压缩混淆后依然能正确运行）
    //数组的 0 到 倒数第二项 是该控制器需要注入的模块
    //最后一项是回掉函数
    app.controller("myController2",["$scope",function(s){
        s.name="tom";
    }])

$rootScope根作用域 在声明 ng-app 的位置创建此作用域
一个 angular 应用有且只有一个根作用域
同级的作用域不可相互访问

    

        {{name}}---{{age}}--{{main}}--{{address}}
    
    
{{name}}--{{age}}--{{main}}--{{address}}
    

        {{address}}
    
    {{name}}--{{main}}--{{address}}


    var app = angular.module("myApp",[])
    app.controller("myController",["$scope",function($scope){
        $scope.name = "sun";
        $scope.age = 30
    }]);
    app.controller("myController2",["$scope",function($scope){
        $scope.name = "tom";
    }]);
    app.controller("mainController",["$scope",function($scope){
        $scope.main = "Hello Angular"
    }])

子级作用域可以访问使用父级作用域的值，但是无权修改

    
父级
    
    

        
子级
        
        这是父级的值：{{pmsg}}
        
{{item.name+'--'+item.price}}
        点击
    


    var app = angular.module("myapp",[]);
    app.controller("myController",["$scope",function($scope){
        $scope.cmsg = ""
        $scope.items = [{
            name:'iPhone',
            price : 3000
        },{
            name:'蓝莓',
            price : 4000
        }];
        $scope.clickEvent = function(e){
            console.log("点击触发",e);
            $scope.items.push({
                name:"新手机",
                price:9889
            })
        }
    }]);
    app.controller("mainController",["$scope",function($scope){
        $scope.pmsg = ""
    }])

内置过滤器

使用内置过滤器的方法是用 “管道符” “|” 链接
**currency ** 货币格式转换
currency ：“前缀” 更改指定的前缀，默认为$
lowercass | uppercase 大小写转换
date 日期格式转换
y 年 M 月 d 日 H 24时 h 12时 m 分钟 s 秒
数组过滤器：
limitTo 限制结果条数 如：limitTo:2 显示两条
orderBy 排序
orderBy:orderKey 按orderKey升序排列
orderBy:orderKey:true 按orderKey 降序排列
filter 按关键字快速过滤
filter:searchKey 过滤所有数据包含 searchKey 的内容

 
{{ price }}
    
{{ price | currency}}
    
{{ price | currency:"￥"}}
    
{{ price | currency:"星星"}}
    
{{ str | lowercase}}
    
{{ str | uppercase}}
    
{{date}}
    
{{date | date:"yyyy-MM-dd HH:mm:ss a"}}
    

    
    

    
        按名称排序
        按价格排序
    
    升/降
    
    
{{item.name +'---'+ item.price}}

  angular.module("myapp",[])
    .controller("myController",["$scope",function($scope){
        console.log($scope)
        $scope.price = 4999,
        $scope.str = "Hello Angular",
        $scope.date = new Date(),
        $scope.items = [{
            name:"iPhone9"
            ,price : 9000
        },{
            name : "iPhone5"
            ,price:3000
        },{
            name:"小米"
            ,price:5000
        },{
            name:"蓝莓"
            ,price:6000
        }]
    }])

自定义过滤器

 
        按名称排序
        按价格排序
    
    升/降
    
    
    {{"str" | myFilter}} {{[2,3,4,5] | myFilter2}}
    
{{item.name}}--{{item.price}}

angular.module("myapp", [])
        .filter("myFilter", function () {
            return function (val) {
                console.log(val);
                // return val.toUpperCase();
                return val == "str" ? "good" : "no"
            }
        })
        .filter("myFilter2", function () {
            return function (val) {
                console.log(val);
                var arr = val.map(Math.sqrt)
                return arr;
            }
        })
        .filter("myFilter3", function () {
            return function (val,arg1) {
                console.log(val);
                console.log(arg1);
                var arr=[];
                val.forEach(function(item){
                    if(item.name.indexOf(arg1)!=-1){
                        arr.push(item)
                    }
                })
                return arr;
            }
        })

http://www.zhangxinxu.com/wordpress/2013/04/es5%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95/