Angularjs笔记(二) 

//  $scope他下面的两个方法
//  -$scope.$watch;
//  -$scope.$apply; 如果 AngularJS检测不到对 model的修改，那么你就需要手动地调用 $apply()去触发他
    
    function Aaa($scope,$timeout){
        $scope.name='hello';
        setTimeout(function(){
            $scope.$apply(function(){
                $scope.name="hi";
            });
        },2000);
    }
//  angular.module
//  --run  想要用全局的，省略控件器的
   
    var m1=angular.module("maApp",[]);

    m1.run(["$rootScope",function($rootScope){
        $rootScope.name="hello";
    }]);
    </script>
    <body>
     <!--<div ng-controller="Aaa">-->
     <div>    
        {{name}}
     </div>

angular的过滤器小技巧

<script type="text/javascript">
        var m1 = angular.module("maApp", []);
        m1.controller("Aaa", ["$scope",
            function($scope) {
                $scope.name = "777998"
            }
        ]);
    </script>
    <body>
        <div ng-controller="Aaa">
            {{name | currency:"￥"}}<!--这个￥类似传参，如果还想加可以在后面用:分割，也可以组合使用过滤器后面跟 |-->
            {{name | number:2}}
            {{name | }}
        </div>
    </body>
    <script type="text/javascript">
        var m1 = angular.module("maApp", []);
        m1.controller("Aaa", ["$scope","$filter",
            function($scope,$filter) {
                $scope.name=$filter("uppercase")("hello");//对name转大写的服务，下面视图就不用写了
                $scope.name=$filter("number")("2222242",1);//要传参在后面写就行
            }
        ]);
    </script>
    <body>
        <div ng-controller="Aaa">
            {{name}}
        </div>
    </body>

angular自定义的过滤器 是通过angular.module下的filter

    <script type="text/javascript">
        var m1 = angular.module("maApp", []);
        m1.filter("firstUpper",function(){
            return function(str){//这个str就是hello
                return str.charAt(0).toUpperCase()+str.substring(1);
            }
        });
        m1.controller("Aaa", ["$scope","$filter",
            function($scope,$filter) {
                $scope.name="hello";
            }
        ]);
    </script>
    <body>
        <div ng-controller="Aaa">
            {{name | firstUpper}}<!--这里调用定义名过滤器名-->
        </div>
    </body>

如果要传参的话

<script type="text/javascript">
        var m1 = angular.module("maApp", []);
        m1.filter("firstUpper",function(){
            return function(str,num){
                console.log(num)//对应的就是下面传进来的参数2
                return str.charAt(0).toUpperCase()+str.substring(1);
            }
        });
        m1.controller("Aaa", ["$scope","$filter",
            function($scope,$filter) {
                $scope.name="hello";
            }
        ]);
    </script>
    <body>
        <div ng-controller="Aaa">
            {{name | firstUpper:2}}
        </div>
    </body>

遍历指令np-repeat

<script type="text/javascript">
        var m1 = angular.module("maApp", []);
        m1.controller("Aaa", ["$scope","$filter",
            function($scope,$filter) {
                $scope.list=[
                   "aaa","bbb","ccc"
                ];
            }]);
    </script>
    <body>
        <div ng-controller="Aaa">
            <ul>
                <li ng-repeat="data in list">{{data}}</li> <!--data自定义名 in是遍历 list自定义列表-->
            </ul>
        </div>
    </body>

 np-repeat下的方法

 <div ng-controller="Aaa">
     <ul>
       <li class="{{$even?"样式一":"样式二"}}" ng-repeat="data in list">{{data}}</li>
     </ul>
 </div>
       
ng-repeat 指令下的方法
   --$index 
   --$first
   --$middle
   --$last
   --$even
   --$odd
   --ng-repeat-start
   --ng-repeat-end

 

posted @ 2015-08-20 16:15  Mi文  阅读(160)  评论(0)    收藏  举报