【AngularJS】—— 4 表达式

眼前了解了AngularJS的主干用法,这里就是跟着PDF一起读书下表达式的有关内容。

  在AngularJS中的表达式,与js中并无完全相同。

  首先她的表达式要在{{}}才会下,其次相对于javascript中的表达式概念,它来以下几点不同:

  1 作用域不同

  以javascript中默认的来意于是window,但是于angularJs中便不同了。它采取$scope控制作用被。

 

  2 同意非定义之价

  在angularjs中,如果下了不定义之表达式,也非会见面世错误,直接回空值。

 

  3 过滤器

  可以在表达式中以 |
管道命令符,添加过滤器,与UNIX的指令行类似。

 

  4 $符号

  用以区别angular的方法和用户从定义之法子。

 

  下面看同样段子小代码:

<!doctype html>
<html ng-app>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller="ctl">
            name:<input ng-model="name" type="text">
            <button ng-click="reset()">reset</button>
            <br>
            {{name}}
            <br>
            hello ! {{test}}
            <br>
            filter : {{name | uppercase}}
        </div>
        <script type="text/javascript">
            function ctl($scope){
                var str = "init";
                $scope.name = str;

                $scope.reset = function(){
                    $scope.name = str;
                }
            }
        </script>
    </body>
</html>

  通过reset触发reset方法,重置name变量的情节;

  于表达式中,引用了不定义之test,但是连没报错,直接默认显示也空;——
{{test}}

  最后使过滤器,将表达式中name的价值转化成特别写。——
{{name | uppercase}}

 

  运行结果:

 

相关文章