麻将游戏在线玩免费

書名： AngularJS入門與進(jìn)階
作者名：江榮波
本章字?jǐn)?shù)： 332字
更新時間： 2020-11-28 23:44:29

2.4 數(shù)據(jù)綁定實例：價格計算器

前面幾節(jié)我們學(xué)習(xí)了AngularJS數(shù)據(jù)綁定的相關(guān)知識，本節(jié)我們使用這些知識來實現(xiàn)一個簡單的價格計算器程序，完整代碼如下：

代碼清單：ch02\ch02_06.html

        <!doctype html>
        <html ng-app>
        <head>
            <meta charset="UTF-8">
            <title>ch02_06</title>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body ng-init="price=10; num=1">
            <div>單價：<input type="number" ng-model="price" /></div><br/>
            <div>數(shù)量：<input type="number" ng-model="num" /></div><br/>
            <div>總價：{{price * num}}</div>
        </body>
        </html>

如上面的代碼所示，首先使用ng-app指令啟動AngularJS框架，接著使用ng-init指令在作用域?qū)ο笾刑砑觾蓚€屬性price和num，指定初始值為10和1，然后使用ng-model指令把price、num兩個屬性和表單元素進(jìn)行數(shù)據(jù)綁定，最后我們使用表達(dá)式輸出price和num的乘積。

在瀏覽器中運行ch02_06.html，可以看到“單價”輸入框和“數(shù)量”輸入框中的數(shù)據(jù)默認(rèn)為10、1，說明作用域中的數(shù)據(jù)修改能夠自動同步到視圖中；修改單價輸入框和數(shù)量輸入框的內(nèi)容分別為100、5，界面中輸出總價為500（見圖2.4），說明在視圖中輸入的數(shù)據(jù)也能夠自動同步到作用域中，這便是AngularJS的雙向數(shù)據(jù)綁定機制。

圖2.4 價格計算器程序

官术网_书友最值得收藏!

AngularJS入門與進(jìn)階

2.4 數(shù)據(jù)綁定實例：價格計算器