Angular.JS学习记录（二）

时间 2019-11-08

标签 angular.js angular 学习记录栏目 AngularJS 繁體版

原文原文链接

今天我们继续来讲angularhtml

angular指令

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

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

双向数据绑定

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

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>

执行的效果以下

看看，是否是数据的改变就影响视图的改变了！
PS：代码中的$timeout就至关于JS中的setTimeout同样，可是若是你在这里写js中的setTimeout是无效的哦，必须按angular的来写。
再来看一个：iphone

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>

其中效果的变化是我点击触发的（录制gif的缘由。看不到鼠标效果）。spa

购物车实例

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

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>

以上的代码就是实现一个小的购物车的例子。实际效果入下：
htm

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

原创文章：转载请注明！ip