基本定义:
1.ng-app = "" 定义了angularJs的使用范围;
2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值,有多个变量时,中间用分号隔开;
3.ng-model = "变量" 定义变量名;
4.ng-bind = "变量" 绑定变量名,获取该变量的数据。这里的变量就是第3条的变量名。
但是一般都用双重花括号来获取变量的值,比如:{{变量}};
5.ng-repeat 指令会重复一个 HTML 元素:(可以用于循环遍历数组)
使用 ng-repeat 来循环数组
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
AngularJs指令:是以ng作为前缀的HTML属性。
AngularJs表达式写在双大括号内{{expression}}。
AngularJs表达式把数据绑定到HTML,这与ng-bind 指令作用相同。
AngularJs将在表达式书写的位置"输出"数据。
AngularJS 表达式 与 JavaScript 表达式
类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。
注意:
ng-model是用于表单元素的,支持双向绑定。对普通元素无效; <input> 元素 <select> 元素(下拉列表)<textarea> 元素 <button> 元素 HTML5 增加了如下表单元素:<datalist><keygen><output>
ng-bind用于普通元素,不能用于表单元素,应用程序单向地渲染数据到元素;
当ng-bind和{{}}同时使用时,ng-bind绑定的值覆盖该元素的内容。
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:
ng-invalid:未通过验证的表单
ng-valid:布尔型属性,它指示表单是否通过验证。如果表单当前通过验证,他将为true
ng-dirty:布尔值属性,表示用户是否修改了表单。如果为 ture,表示有修改过;false 表示修没有修改过
ng-touched:布尔值属性,表示用户是否和控件进行过交互
ng-pristine:布尔值属性,表示用户是否修改了表单。如果为ture,表示没有修改过;false表示修改过
AngularJS中$scope的基本使用方法,先看一段代码:
04 | <meta charset= "UTF-8" /> |
05 | <title>Document</title> |
06 | <script type = "text/javascript" src= "../js/angular.min.js" ></script> |
09 | <div ng-app= 'app' ng-controller= 'ctrl' > |
10 | <input type = "text" ng-model= 'name' /> |
11 | <h1 ng-bind= 'name' ></h1> |
16 | <script type = "text/javascript" > |
17 | var m = angular.module( 'app' , []); |
18 | m.controller( 'ctrl' , [ '$scope' , function ($scope){ |
19 | $scope.name = 'K`illDemo' ; |
|
$scope服务是方法与属性的集合,用于与视图进行交互,使用ng-bind或ng-model等指令,在视图中展示数据写在大括号内{{expression}}。
angular.module(),第一个参数是模块名称,与html代码中的ng-app对应,第二个参数是一个数组,表示这个模块要依赖其他的模块,目前还没有需要依赖的模块,所以这一点后面的笔记中再说。
上面定义模块的js代码还可以这样写:
1 | var m = angular.module( 'app' , []); |
2 | m.controller( 'ctrl' , function ($scope){ |
3 | $scope.name = 'K`illDemo' ; |
|
使用上面这种写法的时候,controller中的回调函数形参必须是$scope,如果换成其他的就会出错,因为Angular服务中只有$scope,换成其他的就找不到了。
如果用最开始的那种写法,那么回调函数中的形参可以自定义,比如a、b、c、d等等都可以:
1 | var m = angular.module( 'app' , []); |
2 | m.controller( 'ctrl' , [ '$scope' , function (a){ |
|
一把情况下,为了保持命名规范,我们都用本文最开始的那种写法。
下面来做一个实例,比如我要做一个购物车,可以为用户展示商品单价,最多选购数量,然后计算出总价,代码如下:
04 | <meta charset= "UTF-8" /> |
05 | <title>Document</title> |
06 | <script type = "text/javascript" src= "../js/angular.min.js" ></script> |
09 | <div ng-app= "app" ng-controller= "ctrl" > |
10 | <p>商品名称:{{goods.data.name}}</p> |
11 | <p>商品单价:{{goods.data.price}}元</p> |
12 | <p>购买数量:{{goods.data.num}}</p> |
13 | <p>商品总价:{{goods.data.price*goods.data.num}}</p> |
15 | <button ng-click= 'goods.add()' >增加</button> |
16 | <button ng-click= 'goods.reduce()' >减少</button> |
21 | <script type = "text/javascript" > |
22 | var m = angular.module( 'app' , []); |
23 | m.controller( 'ctrl' , [ '$scope' , function ($scope){ |
26 | 'name' : 'K`illDemo的AngularJs学习笔记' , |
32 | $scope.goods.data.num = Math.min(++$scope.goods.data.num, 6); |
34 | 'reduce' : function (){ |
36 | $scope.goods.data.num = Math.max(--$scope.goods.data.num, 0); |
|