您的位置：首页 > Web前端 > AngularJS

angular学习笔记(一)-入门案例

2014-04-30 11:19 591 查看
入门实例:一个购物车产品清单,可以自行改变数量,总价自动计算的小例子:代码如下:
<!DOCTYPEhtml>
<htmlng-app>
<head>
<title>1.1实例:购物车</title>
<metacharset="utf-8">
<scriptsrc="../angular.js"></script>
<scriptsrc="script.js"></script>
<styletype="text/css">
.red{
color:#cc0000
}
*{
font-family:'MICROSOFTYAHEI'
}
TD{
font-size:12px;color:#999;
}
</style>
</head>
<body>
<divng-controller="CarController">
<h1>yourshoppingcart</h1>
<table>
<trng-repeat="iteminitems">
<td>{{item.title}}</td>
<td><inputng-model="item.quantity"/></td>
<td>{{item.price|currency}}</td>
<tdclass="red">{{item.price*item.quantity|currency}}</td>
<td><buttonng-click="remove($index)">remove</button></td>
</tr>
</table>
</div>
</body>
</html>
script.js代码:
functionCarController($scope){
$scope.items=[
{"title":"兔子","quantity":1,"price":"100"},
{"title":"喵","quantity":1,"price":"200"},
{"title":"狗只","quantity":1,"price":"400"},
{"title":"仓鼠","quantity":1,"price":"300"}
];
$scope.remove=function(index){
$scope.items.splice(index,1)
}
}
下面对以上代码进行说明:
1.ng-app:

<htmlng-app>:

ng-app属性,用来告诉页面哪一部分需要使用angular管理.通常情况下都这样管理.
(但是我在师傅的网站上看到不是这样的,是加在其它div上面的,而且是有值的.这个学到后面再说)

2.ng-controller:

<divng-controller="CarController">

使用一个控制器来控制页面中的某个区域,这里就是管理这个<div>到</div>里的所有内容
这里使用的控制器就是script.js里定义的CarController函数

3.ng-repeat:

<trng-repeat="iteminitems">

循环当前的标签(包括里面的内容和自己),循环中的当前变量就是item,item在当前作用域的items变量里进行循环
即CarController里定义的$scope.items数组

4.{{}}:

<td>{{item.title}}</td>

使用{{}}来动态的绑定视图里显示的数据.{{}}里就是当前作用域里的变量

5.ng-model:

ng-model="item.quantity"

ng-model用在输入框里,使输入的内容和它等于的变量数据进行绑定,
也就是说,输入的值变化,变量就变化,变量变化,视图上对应显示的数据也变化

6.currency:

<td>{{item.price|currency}}</td>

<tdclass="red">{{item.price*item.quantity|currency}}</td>

angular带有过滤器特性,可以用来做文本格式的转换,其中,currency货币过滤器,可以实现美元格式化

7.ng-click:

<buttonng-click="remove($index)">remove</button>

为元素绑定click事件的回调,点击后就调用作用域下的remove方法,也就是在CarController中添加的remove方法

8.$index:

remove($index)

$index是在ng-repeat过程中的循环的索引值,从0开始

9.控制器:

functionCarController($scope){
...
}

控制器负责管理相关的区域的逻辑.函数的形参$scope就是当前区域的作用域,区域中的变量,方法,都从它的作用域中寻找.
比如这里的$scope.items和$scope.remove

10.另外,ng-repeat所创建的列表是和数据的更新事实绑定的,所以当使用remove方法删除数据中的某一组数据,那么,视图中相应的ui也会被删除.

相关代码托管:https://github.com/OOP-Code-Bunny/angular









                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航