How to implement simple calculations in AngularJS-JS Tutorial-php.cn

How to implement simple calculations in AngularJS

亚连

Release： 2018-06-15 14:31:30

Original

1788 people have browsed it

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>

Copy after login

A few points to note ：

1.<script type="text/javascript" src="../libs/angular.min.js"></script> Introduction to angularjs script;
2.<html lang="en" ng-app> Declarationng-app;
3.<input type="text" ng-model="price"> The data comes from the input box with the ng-model="price"/ng-model="number" attribute;
4.<td>{{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!