Heim >Web-Frontend >js-Tutorial >AngularJS implementiert die Preisberechnungsfunktion
Dieses Mal bringe ich Ihnen AngularJS, um die Preisberechnungsfunktion zu implementieren. Was sind die Vorsichtsmaßnahmen für AngularJS, um die Preisberechnungsfunktion zu implementieren? . Werfen wir einen Blick darauf.
Der Code lautet wie folgt:
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>www.jb51.net angular计算总价</title> <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" > <script type="text/javascript" src="../libs/angular.min.js"></script> </head> <body> <table> <tr><td>单价:</td><td><input type="text" ng-model="price"></td></tr> <tr><td>数量:</td><td><input type="text" ng-model="number"></td></tr> <tr><td>总价:</td><td>{{price*number|currency:'¥'}}</td></tr> </table> </body> </html>
Es sind einige Punkte zu beachten:
<script type="text/javascript" src="../libs/angular.min.js"></script>
Einführung des AngularJS-Skripts <html lang="en" ng-app>
Erklärung von ng-app; <input type="text" ng-model="price">
Daten stammen aus dem Besitz ng-model ="price"/ng-model="number"Eingabefeld des Attributs;<td>{{price*number|currency:'¥'}}
Nach Erhalt der Daten von die Eingabe, {{ Die Operation in }} zeigt das Ergebnis in td an. Darunter ist |. Währung:'¥' der -Filter , der Zahlen in die Währung formatieren kann. Wenn nicht angegeben, ist der Standardwert $.
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:
Wie vue-cli die mobile Anpassung von lib-flexible+rem konfiguriert
vue-cli Ausführliche Erklärung der Nutzung
Das obige ist der detaillierte Inhalt vonAngularJS implementiert die Preisberechnungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!