이 글에서는 주로 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:'￥'}}</td></tr>
</table>
</body>
</html>몇 가지 참고 사항:
1.<script type="text/javascript" src="../libs/angular.min.js"></script> 引入angularjs脚本；
2.<html lang="en" ng-app> 声明ng-app；
3.<input type="text" ng-model="price"> 数据来自拥有ng-model="price"/ng-model="number"属性的input输入框;
4.<td>{{price*number|currency:'￥'}} 입력 {{ } }에서 데이터를 가져온 후 결과가 td에 표시됩니다. 그 중 |currency:'\'는 숫자를 통화로 변환할 수 있는 필터입니다. 지정하지 않으면 기본값은 $입니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Javascript에서 고성능 로딩 시퀀스를 구현하는 방법
Vue+Flask를 사용하여 로그인 확인 점프를 구현하는 방법(자세한 튜토리얼)
react-redux에서 연결 데코레이터를 사용하는 방법
webpack-dev-server에서 http-proxy를 사용하는 방법(자세한 튜토리얼)
vuejs에서 재귀 트리 메뉴 구성 요소를 구현하는 방법(자세한 튜토리얼)
위 내용은 AngularJS에서 간단한 계산을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
