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