AngularJS入門-(5)指令

什麼是AngularJS指令?

AngularJS 通過被稱爲 指令 的新屬性來擴展 HTML,通過內置的指令來爲應用添加功能。
1. ng-app - 該指令啓動一個AngularJS應用。
2. ng-init - 該指令初始化應用程序數據。
3. ng-model - 此指令定義的模型,該模型是變量在AngularJS使用。
4. ng-repeat - 該指令將重複集合中的每個項目的HTML元素。


ng-app指令

ng-app 指令啓動一個AngularJS應用。它定義根元素。它會自動初始化或啓動加載包含AngularJS應用程序的Web頁面的應用程序。它也被用來加載各種AngularJS模塊AngularJS應用。在下面的例子中,我們定義默認AngularJS應用使用div元素的ng-app 屬性。

<div ng-app="">
...
</div>

ng-init 指令

ng-init 指令初始化一個AngularJS應用程序的數據。它被用來把值在應用程序中使用的變量。

<div ng-app="" ng-init="name='seraph'"></div>

ng-model指令

ng-model指令定義在AngularJS應用中使用的模型/變量。

<input type="text" ng-model="name">

ng-repeat 指令

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

    <p>循環對象:</p>
    <ul>
        <li ng-repeat="x in names">
            {{ x.name + ', ' + x.country }}</li>
    </ul>

</div>

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="names=[
{name:'小剛',age:'18'},
{name:'小明',age:'18'},
{name:'小紅',age:'17'}]">

    <p>循環對象:</p>
    <ul>
        <li ng-repeat="x in names">
            {{ x.name + ', ' + x.age }}</li>
    </ul>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章