AngularJS(二)

最新推荐文章于 2020-12-23 10:15:47 发布

tongwandouQX

最新推荐文章于 2020-12-23 10:15:47 发布

阅读量389

点赞数

分类专栏： angularjs 文章标签： angularjs watch过滤器

本文链接：https://blog.csdn.net/qianxing111/article/details/78791855

版权

angularjs 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

解决“Error: [$controller:ctrlreg]”报错问题

当前使用的nagular版本是1.6.0

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">
           /* var app=angular.module("app",[]);
            app.controller("Aaa",Aaa);*/
            function Aaa($scope){
                $scope.iphone={
                    money:50,
                    num:1
                };
            }
        </script>
    </head>
    <body>
        <div ng-controller="Aaa">
            <p>价格：<input type="text" ng-model="iphone.money"> </p>
            <p>个数：<input type="text" ng-model="iphone.num"> </p>
            <p>费用：<span>{{iphone.money * iphone.num | currency:"￥"}}</span></p>
        </div>
    </body>
    </html>
</pre>

运行结果和报错如下：
这里写图片描述
原因是：由于没有在页面中使用模块引入controller导致的，修改内容如下：
添加：ng-app=’app’,然后在js中添加如下代码：

<pre>
     var app=angular.module("app",[]);
     app.controller("Aaa",Aaa);
 </pre>

filter过滤器

可以帮我们完成一些常见的运算操作和辅助功能。
1. currency:货币格式化的方法。

<pre>
   <!DOCTYPE html>
   <html lang="en" ng-app="app">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="js/angular.min.js"></script>
       <script type="text/javascript">
           var app=angular.module("app",[]);
           app.controller("Aaa",Aaa);
           function Aaa($scope){
               $scope.iphone={
                   money:50,
                   num:1
               };
           }
       </script>
   </head>
   <body>
       <div ng-controller="Aaa">
           <p>价格：<input type="text" ng-model="iphone.money"> </p>
           <p>个数：<input type="text" ng-model="iphone.num"> </p>

          <!-- 表达式后面加竖杠“|”，后面接过滤器currency,currency默认是美元-->
           <p>费用：<span>{{iphone.money * iphone.num | currency}}</span></p>

           <!--currency后面加一个参数，为“￥”，可以将货币单位改成“￥”-->
           <p>费用：<span>{{iphone.money * iphone.num | currency:"￥"}}</span></p>
       </div>
   </body>
   </html>
</pre>

运行结果如下：
这里写图片描述

$watch

1.监听数据变化；

2.接收三个参数： $scope.$ watch(a,b,c)；

a第一个参数：需要被监听的变量
b第二个参数：回调函数，必填；

c第三个参数选填。
代码如下：

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/angular.min.js"></script>
        <script type="text/javascript">
            var app=angular.module("app",[]);
            app.controller("Aaa",Aaa);
            function Aaa($scope){
                $scope.iphone={
                    money:50,
                    num:1,
                    fre:10
                };
                $scope.sum=function(){
                    return $scope.iphone.money * $scope.iphone.num;
                };
                $scope.$watch("iphone.money",function(){
                    //当iphone.money的值每次发生变化时，控制台都会打印123
                    console.log(123);
                });
            }

        </script>
    </head>
    <body>
        <div ng-controller="Aaa">
            <p>价格：<input type="text" ng-model="iphone.money"> </p>
            <p>个数：<input type="text" ng-model="iphone.num"> </p>
            <p>运费：<span>{{iphone.fre | currency:"￥"}}</span> </p>
           <!-- 表达式后面加竖杠“|”，后面接过滤器currency,currency默认是美元-->
           <!-- 表达式还可简化-->
            <p>费用：<span>{{sum() | currency}}</span></p>
            <!--currency后面加一个参数，为“￥”，可以将货币单位改成“￥”-->
            <p>费用：<span>{{sum()+iphone.fre | currency:"￥"}}</span></p>
        </div>
    </body>
    </html>
</pre>

注意：只有两个参数时，只能监听单个值的变化。如果将上述代码改成：

    $scope.$watch("iphone",function(){
        //当iphone中的任何值发生变化，都不会打印
        console.log(123);
    });

所以只有两个参数时，无法监听多个值的数据变化。如果想完成上述的需求，需要设置第三个参数。
- 3.第三个参数：可选，是否深入监听，boolean值。
针对需要监听集合

将上述代码改成下面的方式，就能完成多值的监听：

    $scope.$watch("iphone",function(){
        //当iphone中的任何值发生变化，都会打印,如改变iphone.money或iphone.num都能打印，即都能被监听到。
        console.log(123);
    }，true);

4.第二个参数->回调函数接收两个参数(newVal,oldVal),第一个形参是被监听变量的新值，第二个形参是被监听变量的新值的旧值。

     $scope.$watch("iphone.money",function(newVal,oldVal){
        console.log(newVal,oldVal);
    });

5.除了可以监听字符串形式的变量，还能监听函数。

     $scope.$watch($scope.sum,function(newVal,oldVal){
        //打印出sum函数的返回值的新值和旧值
        console.log(newVal,oldVal);
        //消费满100就免运费
        $scope.iphone.fre=newVal>100?0:10;
    });

tongwandouQX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS(二)

解决“Error: [$controller:ctrlreg]”报错问题当前使用的nagular版本是1.6.0<pre> <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Title</title> <script src=
复制链接

扫一扫