AngularJs练习Demo1

AngularJS应用实例

最新推荐文章于 2016-06-21 23:14:00 发布

转载最新推荐文章于 2016-06-21 23:14:00 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sumg/p/5605333.html

本文通过一个具体的AngularJS应用实例，展示了如何使用$apply方法来更新视图中的数据，并利用$watch来监听数据变化，实现动态调整。具体包括按钮点击事件处理、定时任务更新数据等。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="~/Scripts/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("firstController", function ($scope, $timeout) {
            setTimeout(function () {
                //  $scope.name = "111";//这样写两秒后不会改变name的值
                $scope.$apply(function () {  //使用一些外部的方法（如js，jquery）使model发生变化我们就需要使用到$apply:用法就是把要执行的外部方法放在$apply()里面
                    $scope.name = "111";
                });
            }, 2000);
            $scope.name = "张三";
            $scope.age = 10;
            $scope.show = function () {
                $scope.name = "点击我了";
            }

            $timeout(function () {
                $scope.age = "50";
            }, 2000);
        });

        app.controller("secondController", function ($scope) {
            $scope.iphone = {
                money: 15,
                num: 1,
                fre: 10
            };
            $scope.sum = function () {
                return $scope.iphone.money * $scope.iphone.num;
            };
            $scope.$watch($scope.sum, function (newValue, oldValue) { //监视$scope.sum的变化
                $scope.iphone.fre = newValue >= 100 ? 0 : 10;
            });

        });
    </script>
</head>
<body>
    <h1>
        $apply 传播model的变化
    </h1>
    <h1>
        $watch 监听model的变化

    </h1>
    <div ng-app="myApp">
        <div ng-controller="firstController" ng-click="show()">
            {{name}}<br />
            {{age}}
        </div>
        <div ng-controller="secondController">
            <p>价格：<input type="text" ng-model="iphone.money" /></p>
            <p>个数：<input type="text" ng-model="iphone.num" /></p>
            <p>费用：<span>{{sum() | currency:'￥'}}</span></p>
            <p>运费：<span>{{iphone.fre | currency:'￥'}}</span></p>
            <p>总额：<span>{{sum()+iphone.fre | currency:'￥'}}</span></p>
        </div>
    </div>
</body>
</html>