AngularJS入门-(5)指令
2017-08-01 14:58
417 查看
什么是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>
相关文章推荐
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
- AngularJS 基础入门(指令篇)
- AngularJS入门 、AngularJS控制器 、AngularJS常见的内置指令
- AngularJS 基础入门(指令篇)
- AngularJS入门 AngularJS控制器 AngularJS常见内置指令
- angularjs入门学习【指令篇】
- angularjs入门学习【指令篇】
- AngularJS入门教程之ng-checked 指令详解
- AngularJS - 指令入门
- AngularJS入门教程之ng-class 指令用法
- AngularJS快速入门指南04:指令
- AngularJS入门教程之AngularJS指令
- AngularJS 从入门到精通(一 指令)
- angularjs入门学习【指令篇】
- AngularJS快速入门4--内置指令
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
- AngularJS入门教程之AngularJS指令
- AngularJS入门心得3——HTML的左右手指令
- web学习笔记11-angularjs指令基础学习
- AngularJs(七)--指令(三)--标签指令及表单验证