Home > Article > Web Front-end > How to implement simple calculations in AngularJS

How to implement simple calculations in AngularJS

亚连Original: 2018-06-15 14:31:301753browse

This article mainly introduces the function of calculating the total price based on quantity and unit price implemented by AngularJS, involving AngularJS event response and numerical operation related operation skills. Friends in need can refer to it

The example of this article describes the implementation of AngularJS The function of calculating total price based on quantity and unit price. Share it with everyone for your reference, the details are as follows:

Let’s take a look at the effect first:

The code is as follows:

<!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>

A few points to note ：

1.3869966f979f9a09b62ea7480120f9822cacc6d41bbb37262a98f745aa00fbf0 Introduction to angularjs script;
2.77f63148fa3f44d8047e83f70bfef4bc Declarationng-app;
3.656c60d30fb332718069c35f5a7097fc The data comes from the input box with the ng-model="price"/ng-model="number" attribute;
4.b6c5a531a458a2e790c1fd6421739d1c{{price*number|currency:'￥'}} After obtaining the data from input, perform the operation in {{ }} and display the result in td. Among them, | currency:'￥' is a filter that can format numbers into currency. If not specified, the default is $.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement high-performance loading sequence in javascript

##How to implement global registration in axios

How to implement login verification jump using Vue Flask (detailed tutorial)

About usage of connect decorator in react-redux

How to use http-proxy in webpack-dev-server (detailed tutorial)

How to implement a recursive tree menu component in vuejs (detailed tutorial)

The above is the detailed content of How to implement simple calculations in AngularJS. For more information, please follow other related articles on the PHP Chinese website!

JavaScript flask html angular webpack 递归 JS number 事件 input td http

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About rules parameter processing in webpackNext article：About rules parameter processing in webpack

See more

How to implement simple calculations in AngularJS

Related articles