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:'￥'}}</td></tr>
</table>
</body>
</html>Besoin de faire attention Quelques points :
1.<script type="text/javascript" src="../libs/angular.min.js"></script> Introduction du script angulairejs
2.<html lang="en" ng-app> Déclaration de ng-app;
3.<input type="text" ng-model="price"> Les données proviennent de la zone de saisie de l'attribut propriétaireng-model="price"/ng-model="number" ;
4. <td>{{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 connexes :
Comment implémenter une séquence de chargement haute performance en javascript
Comment implémenter l'enregistrement global dans axios
Comment implémenter le saut de vérification de connexion à l'aide de Vue+Flask (tutoriel détaillé)
Utilisation du décorateur de connexion dans React-redux
Comment utiliser http-proxy dans webpack-dev-server (tutoriel détaillé)
Comment implémenter un composant de menu arborescent récursif dans vuejs (tutoriel détaillé)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quels sont les logiciels antivirus ?
Plateforme nationale de monnaie numérique
Comment configurer les variables d'environnement Tomcat
Que signifie c# ?
Comment récupérer des fichiers supprimés définitivement sur un ordinateur
Comment ouvrir des fichiers HTML sur un téléphone mobile
Méthode de récupération de base de données Oracle
Comment résoudre les problèmes lors de l'analyse des packages
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
