ホームページ > 記事 > ウェブフロントエンド > AngularJSで価格計算機能を実装
AngularJSで価格計算機能を実装
- php中世界最好的语言オリジナル
- 2018-04-13 14:21:241491ブラウズ
今回は、価格計算機能を実装するための 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 の入力ボックス;
& lt; td & gt; {{Price*Number | Currency: '￥'}} input からデータを取得後、 {{}} で操作を実行すると、結果が td に表示されます。このうち、|通貨:'￥'
は、数値を通貨にフォーマットできるフィルター
です。指定されていない場合、デフォルトは$です。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
vue-cli lib-flexible+rem モバイル端末適応の設定方法
以上がAngularJSで価格計算機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。