AngularJS尝鲜——快递运费计算

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_30877181

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量123

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangzhaoyang/p/7411869.html

版权

最近想多了解关于前端的内容，毕竟是全栈的时代了，不学一点就会落伍咯。先来尝尝AngularJS吧。

直接上案例：快递运费计算，我会分别使用原生js、jQuery、angularjs来实现。

这里写图片描述

原生js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完善快递运费计算</title>
</head>
<script src="//cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<body>

<!--看成一个小的app，一个小的程序-->
<div ng-app="kuaidi" ng-controller="con">
    <p><input type="text" name="kg" ng-model="kg"/>公斤</p>
    <p>运费：<span>{{price()}}</span>元</p>
</div>
</body>
<script>
    var app = angular.module('kuaidi',[]);
    app.controller('con',function($scope){
        $scope.kg = 1;//设置默认值，这里对应的是app-model中的kg
        $scope.price = function(){
            return $scope.kg <= 1 ? 15 : 15 + ($scope.kg - 1) * 10;
        }
    });
</script>
</html>

jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery做快递费用计算</title>
</head>
<script src="http://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<body>
    <p><input type="text" name="kg" />公斤</p>
    <p>运费：<span></span>元</p>
</body>
<script>
    $('input').change(function(){
        var price = parseFloat(this.value) * 10;
        $('span').html(price);
    });
</script> 
</html>

AngularJS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完善快递运费计算</title>
</head>
<script src="//cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<body>

<!--看成一个小的app，一个小的程序-->
<div ng-app="kuaidi" ng-controller="con">
    <p><input type="text" name="kg" ng-model="kg"/>公斤</p>
    <p>运费：<span>{{price()}}</span>元</p>
</div>
</body>
<script>
    var app = angular.module('kuaidi',[]);
    app.controller('con',function($scope){
        $scope.kg = 1;//设置默认值，这里对应的是ng-model中的kg
        $scope.price = function(){
            return $scope.kg <= 1 ? 15 : 15 + ($scope.kg - 1) * 10;
        }
    });
</script>
</html>

感觉AngularJS很强大，虽然这里我只是简单的获取到了用户输入的数据，然后通过一个函数将计算的结果返回回去，最后用{{price()}}将数据展示出来。

转载于:https://www.cnblogs.com/zhangzhaoyang/p/7411869.html

weixin_30877181

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS尝鲜——快递运费计算

最近想多了解关于前端的内容，毕竟是全栈的时代了，不学一点就会落伍咯。先来尝尝AngularJS吧。直接上案例：快递运费计算，我会分别使用原生js、jQuery、angularjs来实现。原生js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...
复制链接

扫一扫