Heim > Artikel > Web-Frontend > So erstellen Sie mit AngularJS ein Tool zur Berechnung des Einkaufsbetrags
So erstellen Sie mit AngularJS ein Tool zur Berechnung des Einkaufsbetrags
- php中世界最好的语言Original
- 2018-05-31 10:03:011427Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie angularjs verwenden, um ein Tool zur Berechnung des Einkaufsbetrags zu erstellen, und welche Hinweise es gibt, wie Sie mit anglejs ein Tool zur Berechnung des Einkaufsbetrags erstellen . Das Folgende ist ein praktischer Fall.
Es wird sehr mühsam sein, wenn wir js oder jquery verwenden, um den Warenkorb-Betrag zu berechnen. Heute verwenden wir anglejs, um den Warenkorb-Gesamtbetrag mit einer neuen Methode zu berechnen. Der Code lautet wie folgt:
<!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>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So verwenden Sie Webstorm zum Hinzufügen von *.vue-Dateien
So erstellen Sie einen Markdown für mpvue mini Programmanpassung
So verwenden Sie vue.js, um eine Rezeptbearbeitungsfunktion zu erstellen
Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit AngularJS ein Tool zur Berechnung des Einkaufsbetrags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!