简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

AngularJS实现计算价格功能

php中世界最好的语言
Lepaskan： 2018-04-13 14:21:24
asal
1456 orang telah melayarinya

这次给大家带来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>
Salin selepas log masuk

需要注意几点：

<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:'￥'}}        从input中获取到数据之后，进行{{ }}里的运算，将结果展示在td中。其中 | currency:'￥' 为过滤器，可将数字格式化为货币，不指定时默认是$。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue-cli怎么配置lib-flexible+rem移动端自适应

vue-cli的使用详解

Atas ialah kandungan terperinci AngularJS实现计算价格功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
angularjs javascript 功能
sumber：php.cn
Artikel sebelumnya：深入了解js闭包及其作用 Artikel seterusnya：Bootstrap模态框多次弹出提交BUG
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Strim data daripada API OpenAI menggunakan AJAX, PHP dan acara yang dihantar oleh pelayan Bagaimanakah saya boleh menggunakan Acara Dihantar Pelayan (SSE) untuk menstrim data darip...
daripada 2023-11-11 12:03:23
0
1
497
Ralat Jenis Tidak Ditangkap: Tidak dapat menetapkan sifat yang tidak ditentukan (tetapkan 'innerHTML') Saya cuba membuat halaman web menggunakan php, pada elemen kelas "Continuous TextBox&...
daripada 2023-11-08 21:06:09
0
1
278
Bagaimana untuk mendapatkan nilai RGB warna bernama CSS/HTML dalam JavaScript Saya telah mencipta objek Javascript yang dipanggil [name-rgb]. Asas anda:namedColors={Ali...
daripada 2023-11-06 09:05:50
0
2
210
Mengapa begitu banyak skrip JavaScript menambahkan nombor rawak pada sesuatu? perlanggaran? Saya telah mempelajari JavaScript sejak kebelakangan ini dan telah melihat banyak contoh p...
daripada 2023-11-04 20:00:04
0
2
296
Kenal pasti had prestasi dalam JavaScript Saya cuba mencari kesesakan dalam Javascript saya. Pada asasnya saya sedang membangunkan s...
daripada 2023-10-31 20:47:17
0
1
229
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！