AngularJS学习笔记

模板

前面讲了数据绑定之后,现在可以单独讲讲模板了。

作为一套能称之谓“模板”的系统,除了能干一些模板的常规的事之外(好吧,即使是常规的逻辑判断现在它也做不了的),配合作用域 $scope 和 ng 的数据双向绑定机制, ng 的模板系统就变得比较神奇了。

定义模板内容

定义模板的内容现在有三种方式:

  • 在需要的地方直接写字符串
  • 外部文件
  • 使用 script 标签定义的“内部文件”

第一种不需要多说。第二种和第三种都可以和 ng-include 一起工作,来引入一段模板。

直接引入同域的外部文件作为模板的一部分:

注意, src 中的字符串会作为表达式处理(可以是 $scope 中的变量),所以,直接写名字的话需要使用引号。

引入 script 定义的“内部文件”:



配合变量使用:



Load

内容渲染控制

重复 ng-repeat

这算是唯一的一个控制标签么……,它的使用方法类型于:

  • {{ member }}
angular.module('app', [], angular.noop) .controller('TestCtrl', function($scope){ $scope.obj_list = [1,2,3,4]; }); angular.bootstrap(document.documentElement, ['app']);

除此之外,它还提供了几个变量可供使用:

  • $index 当前索引
  • $first 是否为头元素
  • $middle 是否为非头非尾元素
  • $last 是否为尾元素
  • {{ $index }}, {{ member.name }}
angular.module('app', [], angular.noop) .controller('TestCtrl', function($scope){ $scope.obj_list = [{name: 'A'}, {name: 'B'}, {name: 'C'}]; }); angular.bootstrap(document.documentElement, ['app']);

赋值 ng-init

这个指令可以在模板中直接赋值,它作用于 angular.bootstrap 之前,并且,定义的变量与 $scope 作用域无关。

  • {{ member }}

节点控制

样式 ng-style

可以使用一个结构直接表示当前节点的样式:

同样地,绑定一个变量的话,威力大了。

类 ng-class

就是直接地设置当前节点的类,同样,配合数据绑定作用就大了:

ng-class-even 和 ng-class-odd 是和 ng-repeat 配合使用的:

  • {{ m }}

注意里面给的还是表示式,别少了引号。

显示和隐藏 ng-show ng-hide ng-switch

前两个是控制 display 的指令:

1
2
3
4

后一个 ng-switch 是根据一个值来决定哪个节点显示,其它节点移除:

  • 1
  • 2
  • other

其它属性控制

ng-src 控制 src 属性:


ng-href 控制 href 属性:

here

总的来说:

  • ng-src src属性
  • ng-href href属性
  • ng-checked 选中状态
  • ng-selected 被选择状态
  • ng-disabled 禁用状态
  • ng-multiple 多选状态
  • ng-readonly 只读状态

注意: 上面的这些只是单向绑定,即只是从数据到展示,不能反作用于数据。要双向绑定,还是要使用 ng-model 。

事件绑定

事件绑定是模板指令中很好用的一部分。我们可以把相关事件的处理函数直接写在 DOM 中,这样做的最大好处就是可以从 DOM 结构上看出业务处理的形式,你知道当你点击这个节点时哪个函数被执行了。

  • ng-change
  • ng-click
  • ng-dblclick
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-submit

对于事件对象本身,在函数调用时可以直接使用 $event 进行传递:

点击

点击

表单控件

表单控件类的模板指令,最大的作用是它预定义了需要绑定的数据的格式。这样,就可以对于既定的数据进行既定的处理。

form

form 是核心的一个控件。 ng 对 form 这个标签作了包装。事实上, ng 自己的指令是叫 ng-form 的,区别在于, form 标签不能嵌套,而使用 ng-form 指令就可以做嵌套的表单了。

form 的行为中依赖它里面的各个输入控制的状态的,在这里,我们主要关心的是 form 自己的一些方法和属性。从 ng 的角度来说, form 标签,是一个模板指令,也创建了一个 FormController 的实例。这个实例就提供了相应的属性和方法。同时,它里面的控件也是一个 NgModelController 实例。

很重要的一点, form 的相关方法要生效,必须为 form 标签指定 name 和 ng-controller ,并且每个控件都要绑定一个变量。 form 和控件的名字,即是 $scope 中的相关实例的引用变量名。

{{ test_form.$valid }}
angular.module('app', [], angular.noop) .controller('TestCtrl', function($scope){ $scope.see = function(){ console.log($scope.test_form); console.log($scope.test_form.a); } }); angular.bootstrap(document.documentElement, ['app']);

除去对象的方法与属性, form 这个标签本身有一些动态类可以使用:

  • ng-valid 当表单验证通过时的设置
  • ng-invalid 当表单验证失败时的设置
  • ng-pristine 表单的未被动之前拥有
  • ng-dirty 表单被动过之后拥有

form 对象的属性有:

  • $pristine 表单是否未被动过
  • $dirty 表单是否被动过
  • $valid 表单是否验证通过
  • $invalid 表单是否验证失败
  • $error 表单的验证错误

其中的 $error 对象包含有所有字段的验证信息,及对相关字段的 NgModelController 实例的引用。它的结构是一个对象, key 是失败信息, required , minlength 之类的, value 是对应的字段实例列表。

注意,这里的失败信息是按序列取的一个。比如,如果一个字段既要求 required ,也要求 minlength ,那么当它为空时, $error 中只有 required 的失败信息。只输入一个字符之后, required 条件满足了,才可能有 minlength 这个失败信息。

{{ test_form.$error }}
angular.module('app', [], angular.noop) .controller('TestCtrl', function($scope){ $scope.see = function(){ console.log($scope.test_form.$error); } }); angular.bootstrap(document.documentElement, ['app']);

input

input 是数据的最主要入口。 ng 支持 HTML5 中的相关属性,同时对旧浏览器也做了兼容性处理。最重要的, input 的规则定义,是所属表单的相关行为的参照(比如表单是否验证成功)。

input 控件的相关可用属性为:

  • name 名字
  • ng-model 绑定的数据
  • required 是否必填
  • ng-required 是否必填
  • ng-minlength 最小长度
  • ng-maxlength 最大长度
  • ng-pattern 匹配模式
  • ng-change 值变化时的回调
{{ test_form.$error }}

input 控件,它还有一些扩展,这些扩展有些有自己的属性:

  • input type=”number” 多了 number 错误类型,多了 max , min 属性。
  • input type=”url” 多了 url 错误类型。
  • input type=”email” 多了 email 错误类型。

checkbox

它也算是 input 的扩展,不过,它没有验证相关的东西,只有选中与不选中两个值:

{{ a }}
var TestCtrl = function($scope){ $scope.a = 'AA'; }

两点:

  • controller 要初始化变量值。
  • controller 中的初始化值会关系到控件状态(双向绑定)。

radio

也是 input 的扩展。和 checkbox 一样,但它只有一个值了:

{{ a }}

textarea

同 input 。

select

这是一个比较牛B的控件。它里面的一个叫做 ng-options 的属性用于数据呈现。

对于给定列表时的使用。

最简单的使用方法, x for x in list :

在 $scope 中, select 绑定的变量,其值和普通的 value 无关,可以是一个对象:

显示与值分别指定, x.v as x.name for x in o :

加入分组的, x.name group by x.g for x in o :

分组了还分别指定显示与值的, x.v as x.name group by x.g for x in o :

如果参数是对象的话,基本也是一样的,只是把遍历的对象改成 (key, value) :

上一篇: 下一篇: