집 > 기사 > 웹 프론트엔드 > AngularJS에서 간단한 계산을 구현하는 방법

AngularJS에서 간단한 계산을 구현하는 방법

亚连원래의: 2018-06-15 14:31:301750검색

이 글에서는 주로 AngularJS가 구현하는 수량과 단가에 따라 총 가격을 계산하는 기능을 소개하며, AngularJS 이벤트 응답 및 수치 연산 관련 연산 기술이 필요한 친구들이 참고할 수 있습니다

이 글의 예는 계산을 설명합니다. AngularJS Total 가격 기능으로 구현된 수량 및 단가를 기반으로 합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

먼저 효과를 살펴보겠습니다.

코드는 다음과 같습니다.

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

몇 가지 참고 사항:

1.6c35ed8cfbf942c03fea5522b2716d6f2cacc6d41bbb37262a98f745aa00fbf0      引入angularjs脚本；
2.989fb38f775ee2b0c34af2a9fb6d809d         声明ng-app；
3.b28cce587df98846dd82ab8f872d5a54      数据来自拥有ng-model="price"/ng-model="number"属性的input输入框;
4.b6c5a531a458a2e790c1fd6421739d1c{{price*number|currency:'￥'}} 입력 {{ } }에서 데이터를 가져온 후 결과가 td에 표시됩니다. 그 중 |currency:'\'는 숫자를 통화로 변환할 수 있는 필터입니다. 지정하지 않으면 기본값은 $입니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

AngularJS에서 간단한 계산을 구현하는 방법

관련 기사