Angular系列之指令(三)
阿新 • • 發佈:2018-12-15
本篇將介紹angular的重要核心模組之一指令;那麼有關指令的一些介紹其實在前一篇《angular系列之表示式(二)》已有講過,便不再敘說,暫時只介紹部分指令,其餘指令後面有介紹使用;
ng-app 指令用於告訴 AngularJS 應用當前這個元素是根元素。所有 AngularJS 應用都必須要要一個根元素。同時也就是說當前在這個根元素下的所有html標籤與要執行的與這些標籤相關的業務邏輯都交給angularJS去管理了。
ng-init 指令初始化應用程式資料。
注:(使用 ng-init 不是很常見。在控制器一章中有一個更好的初始化資料的方式。)
(通常情況下,不使用 ng-init。您將使用一個控制器或模組來代替它。)
ng-model 指令把元素值(比如輸入域的值)繫結到應用程式或者是說指令綁定了 HTML 表單元素到 scope 變數中,如果 scope 中不存在變數, 將會建立它。;
注:目前只支援<input>, <select>, <textarea>這三個標籤;
ngRepeat 就只相當與JS中的for迴圈+標籤生成,又或者是說相當於模板引擎功能;
1.ngModel與ngInit的結合使用
<div ng-init="quantity=1;price=5"> <h2>價格計算器</h2> 數量: <input type="number" ng-model="quantity"> 價格: <input type="number" ng-model="price"> <p><b>總價:</b> {{ quantity * price }}</p> </div>
2.ngRepeat使用
<!--例項1--> <div ng-init="names=['liuqiang','kerui','liufeifei']"> <p>使用 ng-repeat 來迴圈陣列</p> <ul> <li ng-repeat="x in names"> {{x}} </li> </ul> </div> <!--例項2--> <div ng-init="nameObj=[ {name:'liuqiang',country:'九江'}, {name:'kerui',country:'江西'}, {name:'liufeifei',country:'南昌'}]"> <p>使用 ng-repeat 迴圈物件</p> <ul> <li ng-repeat="x in nameObj"> 姓名: {{x.name}} + 住址: {{x.country}} </li> </ul> </div>
執行結果: