AngularJS で簡単な計算を実装する方法-jsチュートリアル-php.cn

AngularJS で簡単な計算を実装する方法

亚连

リリース： 2018-06-15 14:31:30

オリジナル

1789 人が閲覧しました

この記事ではAngularJSで実装されている数量と単価に基づいて合計金額を計算する機能を中心に紹介します。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:&#39;￥&#39;}}</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 に表示されます。このうち、|通貨:'￥'は、数値を通貨にフォーマットできるフィルターです。指定しない場合は、デフォルトで$になります。

上記は私があなたのためにまとめたものです。

JavaScriptで高パフォーマンスなロードシーケンスを実装する方法

axiosでグローバル登録を実装する方法

Vue+Flaskを使用してログイン検証ジャンプを実装する方法(詳細なチュートリアル)

react-redux で接続デコレータを使用する方法

webpack-dev-server で http-proxy を使用する方法 (詳細なチュートリアル)

vuejs で再帰ツリーメニューコンポーネントを実装する方法 (詳細なチュートリアル)

以上がAngularJS で簡単な計算を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。