Cash'yu

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

AngularJS的表达式是放在{{}}里面,用{{ }}符号将一个变量绑定到$scope上。

angularJS中的表达式有如下特点:

1.只能在其所属作用域内部

所有的表达式都在其所属的作用域内部执行,并有访问本地$scope的权限。

2.允许未定义

在html中可以使用未在angularJS定义的变量,不会抛出异常

3.不能使用流控制

不能使用任何流控制包括条件语句,如if/else

4.过滤器

可以接收过滤器和过滤器链,使用 | 符号连接过滤器

 请看小例子:

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8" /> 
<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
</head>
<body>
    <div ng-controller="Controller">
        <button ng-click="change()">change</button>
        <br>
        显示:{{ person }}
        <br>
        未显示{{undefine}}
        <br>
        过滤显示:{{person | uppercase}}
    </div>
    <script type="text/javascript">
        function Controller($scope){
            $scope.person = 'monkey';
            $scope.change = function(){
                $scope.person = 'cat';
            }
        }
    </script>
</body>
</html>

 

自定义过滤器:

html文件:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" /> 
<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
</head>
<body>
    <div ng-controller="Controller">
        <button ng-click="change()">change</button>
        <br>
        显示:{{ person }}
        <br>
        未显示{{undefine}}
        <br>
        过滤显示(大写):{{person | uppercase}}
        <br>
        过滤显示(首字母大写):{{person | capitalize}}
        <br>
        过滤显示(首字母大写):{{person | lowercase | capitalize}}
    </div>
    <script type="text/javascript" src="./app.js"></script>
</body>
</html>

app.js文件:

var app = angular.module("myApp",[]);

app.controller('Controller',function($scope){
    $scope.person = 'monkey';
            $scope.change = function(){
                $scope.person = 'cat';
    }
})

app.filter('capitalize',function(){
    return function(input){        //input是我们传入的字符串
        if (input) {
            return input[0].toUpperCase() + input.slice(1);
        }
    }
})

 

 

posted on 2016-09-09 11:55  cmmkj  阅读(1268)  评论(0编辑  收藏  举报