AngularJSで価格計算機能を実装-jsチュートリアル-php.cn

AngularJSで価格計算機能を実装

php中世界最好的语言

リリース： 2018-04-13 14:21:24

オリジナル

1540 人が閲覧しました

今回は、価格計算機能を実装するための 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> angularjs スクリプト;

& lt; html lang = "EN" ng-APP & GT; <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; 入力タイプ = "text" ng-model = "価格" & gt; データは ng-model="price"/ng-model="number" 属性 p の入力ボックス;