学习资料

小生愛

Angular.js 实例

// Angular 实例一 ng-app _________________________________________________________________________ /** * ng-app : 定义Angular解析范围 * ng-model : 把输出域的值绑定到应用程序的某个变量上 * ng-bind : 把应用程序定义的变量绑定到某个节点的innerHTML上 */

在输入框中尝试输入：

姓名：

// 这种方式使用data-ng-model也是可以的

在输入框中尝试输入：

姓名：

// 只有动态改变该div的值时 p的值才会发生变化

小花

// Angular 实例二 ng-init _________________________________________________________________________ /** * 应用程序的变量值必须带引号 * 变量名不能跟其他变量名重复 */

// Angular 实例三 Angular表达式 _________________________________________________________________________ /** * 表达式写在 {{}} * ng-init : 可以同时定义多个属性 */ // 数字

// 上面的写法等价于用ng-bind这种写法

// 字符串

// 对象

// 数组

// ng-bind-template : 同时绑定多个表达式

// 控制器嵌套

Say hello

// Angular 实例七过滤器 _________________________________________________________________________

{{(x.name | uppercase) + ' ' + (x.country | lowercase)}}

// 通过JS修改过滤器

// ng-readonly // ng-class

{{person.name}} lives in {{person.city}}

// ng-cloak : 避免闪烁 ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来

/** * ng-change : 表单输入发生变化时计算表达式的值 */

{{ equation.output }}

// Angular 实例八 XMLHttpRequest _________________________________________________________________________

{{x.Name + ' - ' + x.Country}}

// 跨域请求

显示的内容: {{ aThirdProperty }}

显示内容: {{ aThirdProperty }}

显示内容: {{ aThirdProperty }}
显示内容: {{ myProperty }}

显示内容: {{ myProperty }}

// 排序分组过滤该方法是通过改变p标签的应用程序变量cd的值为 // /** * ng-repeat : 解析的JSON的某一个键 $index : 遍历的进度(0...length-1) $first : 当元素是遍历的第一个时值为true $middle : 当元素处于第一个和最后元素之间时值为true $last : 当元素是遍历的最后一个时值为true $even : 当$index值是偶数时值为true $odd : 当$index值是奇数时值为true */

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

表格

/** * ng-if : 移除或生成一个元素 true : 生成一个元素 false : 移除一个元素 */

显示

隐藏

选中

我是可见的
我是不可见

我是可见的

我是不可见的
我是可见的

// Angular 实例八表格练习 _________________________________________________________________________

// Angular 实例九表单验证 _________________________________________________________________________ // Angular 实例十 $watch 监听 _________________________________________________________________________

编辑	名	姓
	{{user.fName}}	{{user.lName}}

创建新用户

编辑用户

// 手动解析表达式

// Angular 实例十一 ng-include 包含 _________________________________________________________________________

// Angular 实例十二 $interpolate 插值方法 _________________________________________________________________________

{{ previewText }}

// Angular 实例十三 directive 自定义指令 _________________________________________________________________________

// 向指令中传递参数

// 通过ng-model 修改隔离作用域

// = 自定义指令双向绑定 // 指令内联控制器

/** * 多控制器属性方法修改同javascript 对象引用值复制 */

// Angular 实例十四 $timeout _________________________________________________________________________ // Angular 实例十五 ng-transclude _________________________________________________________________________

// Angular 实例十六 ui-route _________________________________________________________________________ /** * abstract onEnter onExit */

查看视图查看嵌套视图1 查看嵌套视图2

点击链接后内容会被加载在这里

/** * 状态改变事件 * 视图加载事件 */

風_ｓhī~`才子

小生愛

Angular.js 实例

表格

创建新用户

编辑用户

{{ parseValue }}