Angularjs快速入门（二）
说说上一节的例子，$scope 我们没有创建这个对象，直接绑定就能获取里面的对象，这种风格遵循了一种叫迪米特法则的设计模式。
然后angular还有一种很强大的功能叫“指令”。
就是你可以吧模板编写成HTML的形式，而里面有些不属于HTML规范的东西，如引入的ng-controller。ng-model，接下来我们看个类似购物车的例子：
1 <html ng-app=‘my-app’>
2 <head>
3 <tiltle>my shopping cart</title>
4 </head>
5 <body ng-controller='CartController'>
6 <h1>my order</h1>
7 <div ng-repeat='item in items'>
8 <span>{{item.title}}</span>
9 <input ng-model='item.quantity'>
10 <span>{{item.price|currency}}</span>
11 <span>{{item.price * item.quantity|currency}}</span>
12 <button ng-click="remove($index)">remove</button>
13 </div>
14 <script src="angular.js"></script>
15 <script>
16 function CarController($scope){
17 $scope.items=[
18 {title:'Paint pots',quantity:8,price:3.33},
19 {title:'Pack pots',quantity:5,price:2.33},
20 {title:'Pedbbles pots',quantity3,price:12}
21 ];
22 $scope.remove=function(index){
23 $scope.items.splice(index,1);
24 }
25 }
26 </script>
27 </body>
28 </html>这其中有几个解释的地方，第一个就是ng-app='my-app',这个表示整个页面都是angular管理页面
第二个，ng-repeat=‘item in items’表示items数组中的每个元素都把<div>的dom结构复制一份，包括div本身，items有三组数，所以现在有三个div
第三个，{{item.title}}通过{{}}绑定数据，与ng-model='item.quantity'创建绑定关系
第四个，
{{item.price|currency}}
{{item.price * item.quantity|currency}}过滤器
currency是货币过滤器是内置的它可以为我们实现美元格式化。
第五个，ng-click="remove($index)"
删除按钮，能删除购物车的物品。本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-11-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读