AngularJS嚐鮮——快遞運費計算

webbc發表於2017-04-06
AngularJS

最近想多瞭解關於前端的內容，畢竟是全棧的時代了，不學一點就會落伍咯。先來嚐嚐AngularJS吧。

直接上案例：快遞運費計算，我會分別使用原生JS、JQuery、AngularJS來實現。

這裡寫圖片描述

原生js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JS，求快遞運費</title>
</head>
<body>
    <p><input type="text" name="kg" />公斤</p>
    <p>運費：<span></span>元</p>
</body>
<script>
    var input = document.getElementsByName('kg')[0];
    input.oninput = function(){
        var kg = input.value;
        document.getElementsByTagName('span')[0].innerHTML = parseFloat(kg) * 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;//設定預設值，這裡對應的是app-model中的kg
        $scope.price = function(){
            return $scope.kg <= 1 ? 15 : 15 + ($scope.kg - 1) * 10;
        }
    });
</script>
</html>

感覺AngularJS很強大，雖然這裡我只是簡單的獲取到了使用者輸入的資料，然後通過一個函式將計算的結果返回回去，最後用{{price()}}將資料展示出來。

相關文章