Angular.JS学习记录（二）

2019年9月15日 186次阅读 来源: Hockor

今天咱们继续来说angular

angular指令

angular指令就是其内置的一些方法。均以ng-XXX来表示，比如前面见到的ng-controller,ng-model，ng-app等等。

其中ng-app是angualr的初始化指令，如果不写，那么整个页面关于angular的JS都不会起作用的哦！你可以把它写在HTML标签上，也可以写在局部的Div身上。这样子你就可以灵活的控制需要使用angular的地方了。

双向数据绑定

Angular是MVVM模式，即双向数据绑定，也就是说数据的改变可以影响到视图，视图的改变可以影响到数据的改变，这就是双向数据绑定。咱们来看看代码：

html<body>
<div ng-controller="hockor">
    <p>hello {{name}}</p>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    "use strict";
    function hockor($scope,$timeout) {
        $scope.name = "world";
        $timeout(function () {
            $scope.name = "hockor";
        }, 3000)
    }
</script>
</body>

执行的效果如下
《Angular.JS学习记录（二）》
看看，是不是数据的改变就影响视图的改变了！
PS：代码中的$timeout就相当于JS中的setTimeout一样，但是如果你在这里写js中的setTimeout是无效的哦，必须按angular的来写。
再来看一个：

html<body>
<div ng-controller="hockor" ng-click="name='click'">
    <p>hello {{name}}</p>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    "use strict";
    function hockor($scope,$timeout) {
        $scope.name = "world";
    }
</script>
</body>

《Angular.JS学习记录（二）》
其中效果的变化是我点击触发的（录制gif的原因。看不到鼠标效果）。

购物车实例

接下来我们看看angular中的过滤器，并且做一个小例子！
要求：完成一个简单的购物车，当用户总价大于100元时，运费为0；

html<body>


<div ng-controller="hockor">
    <p>单价: 
    <label>
        <input type="text" ng-model="iphone.money"/>
    </label>
    </p>
    <p>数量: 
    <label>
        <input type="text" ng-model="iphone.num"/>
    </label>
    </p>
    <p>费用: <span>{{sum() | currency:'￥'}}</span></p>
    <p>运费：<span>{{iphone.free | currency:'￥'}}</span></p>
    <p>总额：<span>{{sum() + iphone.free | currency:'￥'}}</span></p>
</div>


<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>



<script>
    "use strict";
    function hockor($scope) {
        $scope.iphone = {
            money : 50,
            num : 1,
            free : 10
        };
        $scope.sum = function () {
            return $scope.iphone.money*$scope.iphone.num;
        };
        //watch普通监听只能监听单个值，如果想监听一个集合，需要第三个参数true
        $scope.$watch($scope.sum,function(newval,oldval) {
            //形参中的newval和oldval分别表示监听数据的最新值和修改前的值
            $scope.iphone.free = newval >= 100 ? 0 : 10;
        },true);//此处的true可写可不写
    }
</script>


</body>

以上的代码就是实现一个小的购物车的例子。实际效果入下：
《Angular.JS学习记录（二）》

注意：其中的currency是货币的标识。通过 | 进行管道传输（类似于linux的通道），默认是$(美元).可以通过以上方式修改为￥,欧元等等。

原创文章：转载请注明！

    原文作者：Hockor
    原文地址: https://segmentfault.com/a/1190000002545838
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞