Angular(二)
1 <!DOCTYPE html> 2 <html lang="en" ng-app='myApp'> 3 <head> 4 <meta charset="UTF-8"> 5 <title>购物车</title> 6 </head> 7 <body ng-controller='CartController'> 8 <h1>Your Order</h1> 9 <div ng-repeat='item in items'> 10 <span>{{item.title}}</span> 11 <input type="text" ng-model='item.quality'> 12 <span>{{item.price|currency}}</span> 13 <span>{{item.price*item.quality|currency}}</span> 14 <button ng-click='remove($index)'>Remove</button> 15 </div> 16 <script src='angular-1.3.0.js'></script> 17 <script> 18 var myApp=angular.module('myApp',[]); 19 myApp.controller("CartController",["$scope",function($scope){ 20 21 $scope.items=[ 22 {title:'Paint pots',quality:8,price:3.95}, 23 {title:'Polka dots',quality:17,price:12.95}, 24 {title:'Pebbles',quality:5,price:6.95} 25 ]; 26 console.log($scope.items); 27 28 $scope.remove=function(index){ 29 console.log(index); 30 $scope.items.splice(index,1) 31 } 32 33 }]); 34 35 </script> 36 </body> 37 </html>
效果图:
ng-repeat的意思是,对于items数组中的每一个元素,都把<div>中的DOM结构复制一份(包括div自身)。对于div的每一分拷贝,都会把item的属性设置给它,这样我们就可以在模板中使用这份拷贝的元素了。如你所见这样一来就会产生3个<div>,其中分别包含了产品的名称、数量、单价、总价,以及一个可以用来完全删除一个项目的按钮。
ng-model我们就可以保持变更与模型同步了。ng-model声明将会把item.quality的值插入文本框中,同时,不管什么时候,只要用户输入了新的数值,它就会自动更新item.quantity的值。
<button ng-click='remove($index)'>Remove</button>点击产品旁边的remove按钮即可,会调用remove()函数。同时会把$index传递过去,$index包含了ng-repeat过程中的循环计数,这样一来我们就知道要删除哪一个项目。
CartController将会负责管理购物车的业务逻辑。在函数的形参中放一个$scope就可以告诉angular:控制器需要一个叫做$scope的东西。我们可以通过$scope把数据绑定到UI中的元素上。
通过定义$scope.items,我们创建了一个虚拟的hash型数据,用来表示用户购物车中的项目集合。我们想让这些项目能够对UI的数据绑定有效,所以我们要把它们设置到$scope上。
在绑定UI的时候,我们希望remove()函数也有效,所以我们也要把它设置到$scope上。
<span>{{someText}}</span> 我们把这叫做双花括号插值语法,因为它可以把新的内容插入到现有的模板中。
控制器就是你所编写的类或者类型,它的作用是告诉angular该模型是由哪些对象或者基本数据构成的,只要把这些对象或者基本数据设置到$scope对象上即可,$scope对象就会被传递给控制器。
1 myApp.controller("TextController",["$scope",function($scope){ 2 $scope.someText='jhhhhhh'; 3 } 4 }]);
在很简单的情况下,以上使用基本数据类型的模型工作做得很好,但是对于大多数应用来说,你都需要创建模型对象类来容纳你的数据。我们来创建一个message模型对象,然后用它来存储someText属性。
var messages={}; messages.someText='jhhhhh'; myApp.controller("TextController",["$scope",function($scope){ $scope.messages=messages; } }]);
然后在模板中这样使用:
<p>{{messages.someText}}</p>