AngularJs练习Demo1

Posted 编程猴子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs练习Demo1相关的知识，希望对你有一定的参考价值。

@{
    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>

 

以上是关于AngularJs练习Demo1的主要内容，如果未能解决你的问题，请参考以下文章

angularjs购物车练习

java练习多线程

从 AngularJS url 中删除片段标识符（# 符号）

初入AngularJS基础门

AngularJS ——ngResourceRESTful APIs 使用

浅谈AngularJS中的$parse和$eval