AngularJS(二)

来源：互联网发布：oracle数据库中文版编辑：程序博客网时间：2024/06/14 06:17

解决“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;    });

阅读全文

0 0