码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS学习——价格计算器

时间:2016-07-07 17:27:45      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

利用AngularJs实现价格计算器,总价满100免运费。(熟悉$watch的使用)

技术分享

代码:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>价格计算器</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container" ng-controller="MyControl">
        <h2>价格计算器</h2>
        单价:<input type="text" class="form-control" ng-model="iphone.price">
        数量:<input type="text" class="form-control" ng-model="iphone.num">
        <hr>
        <p>总价:{{ sum() | currency:‘¥‘}}</p>
        <p>运费:{{ iphone.yf | currency:‘¥‘}}</p>
        <p>合计:{{ sum() + iphone.yf | currency:‘¥‘}}</p>
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var myAng = angular.module(myApp,[]);
        myAng.controller(MyControl,function($scope){
            $scope.iphone = {
                price:10,
                num:1,
                yf:10
            }
            $scope.sum = function(){
                return $scope.iphone.price*$scope.iphone.num
            }
            // $watch监控对象为属性时,不加$scope
            $scope.$watch(iphone.num,function(newvalue,oldvalue){
                console.log(新值:+ newvalue +;旧值:+ oldvalue)
            })
            // $watch监控对象为方法时,加$scope
            $scope.$watch($scope.sum,function(newvalue,oldvalue){
                return $scope.iphone.yf = newvalue >= 100 ? 0 : 10;
            })
        })
    </script>
</body>
</html>

 

 

 

AngularJS学习——价格计算器

标签:

原文地址:http://www.cnblogs.com/lvmylife/p/5650556.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!