AngularJS指令

AngularJS指令

通过指令的心属性来扩展HTML。

AngularJS指令是扩展的HTML属性,带有前缀ng-。

ag-app指令初始化一个AngularJS应用程序。

ng-init指令初始化应用程序数据。

ng-model指令把元素值绑定到应用程序,如输入域的值。

<div ng-app="" ng-init="name=‘hello world‘">

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

<div>你输入的为:{{name}}</div>

</div>

*单个页面中可以包含多个AngularJS应用程序。

AngularJS中的数据绑定同步了AngularJS表达式和AngularJS数据。

即{{name}} 是通过ng-model="name"进行同步

 数据绑定

以下是通过2个ng-model来同步的实例:

<div ng-app="" ng-init="quantity=5;price=3">

数量:<input type="number" ng-model="quantity">

价格:<input type="number" ng-model="price">

<div>总价:{{quantity*price}}</div>

</div>

重复HTMl元素:ng-repeat指令实例

<div ng-app="" ng-init="names=[‘tom‘,‘jeeny‘,‘mary‘]"></div>

<ul>

<li ng-repeat="x in names">

{{ x }}

</li>

</ul>

</div>

ng-repeat指令在一个对象数组上:

<div ng-app="" ng-init="names=[

{name:‘tom‘,age=23},

{name:‘mary‘,age=24},

{name:‘jeeny‘,age=18}

]">

循环结果:

<ul>

<li ng-repeat="x in names">

{{x.name+‘,‘+x.age}}

</li>

</ul>

</div>

指令的作用

*Angular支持数据库的crud即增删查改。

ng-app指令定义了AngularJS应用程序的根元素,网页加载完成会自动引导即自动初始化应用程序

ng-init指令为AngularJS应用程序定义了初始值,同常不用。而是用控制器或者模块代替。

ng-model指令绑定HTML元素到应用程序数据

为应用程序数据提供类型验证(number email required)

为应用程序数据提供状态(invalid dirty touched error)

为HTML元素提供css类

绑定HTML元素到HTMl表单

ng-repeat指令对于集合中(数组中)的每个项会克隆一次HTML元素。

摘录自runoob.com。旨在通过自己的语言加深对AngularJS的学习、理解和记忆。

时间: 2024-08-24 18:58:20

AngularJS指令的相关文章

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

AngularJS指令中的compile与link函数解析

AngularJS指令中的compile与link函数解析 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-lin

angularjs指令中的compile详解

篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的

JavaScript强化教程——AngularJS 指令

本文为 H5EDU 机构官方 HTML5培训 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 完整的指令内容可以参阅 An

angularjs 指令—— 绑定策略(@、=、&amp;)

angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 一.@ 绑定策略 @ 绑定策略,它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值.(指令属性的值可以使用表达式,但是得出来的值一定是字符串.) 1.上代码: html代码 <!DOCTYPE html> <h

AngularJS 指令

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许自定义指令. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 实例 <div ng-app="" ng-init=&quo

AngularJS 指令 表达式 应用

AngularJS 指令 AngularJS 指令是以 ng 作为前缀的 HTML 属性. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序. 稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块. ng-model 指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. ng-model 指令也可以: 为应用程序数据

AngularJS 指令应用

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. <div ng-app="" ng-init="firstName='John'"> <p&g

【转】angularjs指令中的compile与link函数详解

这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令