AngularJS入门-（5）指令

最新推荐文章于 2023-03-15 15:16:45 发布

炽天使_1985

最新推荐文章于 2023-03-15 15:16:45 发布

阅读量208

点赞数

分类专栏： AngularJS 文章标签： angularjs 应用

本文链接：https://blog.csdn.net/wzjisking/article/details/76528764

版权

AngularJS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

什么是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>