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>

努力将自己的温暖带给身边的人！！！！！