Maison > Article > interface Web > Comment implémenter des calculs simples dans AngularJS

Comment implémenter des calculs simples dans AngularJS

亚连original: 2018-06-15 14:31:301750parcourir

Cet article présente principalement la fonction de calcul du prix total en fonction de la quantité et du prix unitaire mise en œuvre par AngularJS, impliquant la réponse aux événements AngularJS et les compétences opérationnelles liées aux opérations numériques. Les amis dans le besoin peuvent s'y référer

Cet article. décrit l'implémentation d'AngularJS avec des exemples La fonction de calcul du prix total en fonction de la quantité et du prix unitaire. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Jetez d'abord un œil à l'effet :

Le code est le suivant :

<!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:&#39;￥&#39;}}</td></tr>
 </table>
</body>
</html>

Besoin de faire attention Quelques points :

1.6c35ed8cfbf942c03fea5522b2716d6f2cacc6d41bbb37262a98f745aa00fbf0 Introduction du script angulairejs
2.989fb38f775ee2b0c34af2a9fb6d809d Déclaration de ng-app;
3.b28cce587df98846dd82ab8f872d5a54 Les données proviennent de la zone de saisie de l'attribut propriétaireng-model="price"/ng-model="number" ;
4. b6c5a531a458a2e790c1fd6421739d1c{{price*number|currency:'￥'}} Après avoir obtenu les données de l'entrée, {{ L'opération dans }} affiche le résultat dans td. Parmi eux, | monnaie :'￥' est un filtre qui peut formater les nombres en devise. S'il n'est pas spécifié, la valeur par défaut est $.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus