AngularJS는 가격 계산 기능을 구현합니다.-JS 튜토리얼-php.cn

AngularJS는 가격 계산 기능을 구현합니다.

php中世界最好的语言

풀어 주다： 2018-04-13 14:21:24

원래의

1544명이 탐색했습니다.

이번에는 가격 계산 기능 구현을 위해 AngularJS를 가져왔습니다. AngularJS가 가격 계산 기능을 구현할 때 주의해야 할 주의사항은 무엇인지 살펴보겠습니다.

코드는 다음과 같습니다:

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

로그인 후 복사

몇 가지 참고할 사항이 있습니다:

<script type="text/javascript" src="../libs/angular.min.js"></script> 소개 <script type="text/javascript" src="../libs/angular.min.js"></script>      引入angularjs脚本；
<html lang="en" ng-app>         声明ng-app；
<input type="text" ng-model="price">      数据来自拥有ng-model="price"/ng-model="number"属性的input输入框;
<td>{{price*number|currency:'￥'}} & lt; html lang = "en" ng-apg-app & gt; 상태 <span style="color:#0000ff;">ng-APP</span> <a href="//m.sbmmt.com/code/120.html" target="_blank"> 입력 유형 = "text" ng- model = "price" & gt; </a> 데이터 출처: ng-model="price"

ng-model="number"

속성

;

<td>{{price*number|currency:'엔'}}의 입력 입력란에서 데이터를 가져온 후 입력 후 {{ }}에서 작업을 수행하면 결과가 td에 표시됩니다. 그 중

|currency:'\'는 숫자를 통화 형식으로 지정할 수 있는 filter
입니다. 지정하지 않으면 기본값은 $입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서:

vue-cli lib-flexible+rem 모바일 터미널 적응 구성 방법🎜🎜🎜🎜🎜vue-cli 사용에 대한 자세한 설명🎜🎜🎜🎜

위 내용은 AngularJS는 가격 계산 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!