ホームページ >ウェブフロントエンド >jsチュートリアル >angularjsを使って買い物金額計算ツールを作る方法
angularjsを使って買い物金額計算ツールを作る方法
- php中世界最好的语言オリジナル
- 2018-05-31 10:03:011500ブラウズ
今回はangularjsを使って買い物金額計算ツールを作る方法と、angularjsを使って買い物金額計算ツールを作る方法の注意点
を紹介します。見て。 jsやjqueryを使ってショッピングカートの金額を計算すると非常に面倒になりますが、今日はangularjsを使ってショッピングカートの合計金額を計算するコードは以下の通りです:<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title> angular购物金额计算器</title>
</head>
<body ng-controller="sum">
价格:<input type="text" ng-model="cup.price">
<br/><br/>
数量:<input type="text" ng-model="cup.count">
<p>运费:{{cup.fee|currency:"¥"}}</p>
<p>总金额:{{all()|currency:"¥"}}</p><!-- 过滤器currency -->
</body>
<script src="angular.min.js"></script>
<script>
// 购物金额计算
function sum($scope){
$scope.cup={
"price":12,
"count":1,
"fee":20
}
$scope.all=function(){
return $scope.cup.price*$scope.cup.count;
}
// $watch
// 监听变化
// 有三个参数
// 1.函数或属性
// 2.callback
// 3.true深度监听
$scope.$watch("all()",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<100){
$scope.cup.fee=20;
}
else{
$scope.cup.fee=0;
}
},true)
$scope.$watch("cup.count",function(nval, oval){
//console.log(nval+":"+oval);
if(nval<1){
$scope.cup.fee=0;
}
},true)
}
</script>
<script>
</script>
</html>もうマスターできたと思います。この記事の事例を読んだ後にそれを実行してください。さらに興味深い方法については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: ウェブストームを使用して *.vue ファイルを追加する方法
mpvue によって作成されたミニ プログラムにマークダウンを適応させる方法
以上がangularjsを使って買い物金額計算ツールを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。