先看代码
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart</title>
<script src="../js/lib/angular.min.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{itme.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('CartController', function($scope) {
$scope.items = [
{title : 'Paint pots', quantity : 8, price : 3.95},
{title : 'Polka dots', quantity : 17, price : 12.95},
{title : 'Pebbles', quantity : 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
});
</script>
</body>
</html>展示效果：
知识点：
ng-app 属性将用来告诉Angular页面中哪些需要接受它的管理
ng-controller 表示将会有一种叫作控制器的JavaScript类来管理页面中的区域
ng-repeat 表示对于items数组中的每一个元素，都把<div>中的DOM结构复制一份。
{{item.title}} 表示进行数据绑定，将变量中的值插入到页面中，同时保证它会自动同步。但是{{}}是单向绑定，并且在为加载完成是页面有可能直接显示{{itme.title}}
ng-model 将会在输入框和item.quantity的值之间创建数据绑定关系。使用ng-model可以保证变量与模型同步。
current 是AngularJs自带过滤器，是单价和总价以美元显示。
ng-click 绑定点击事件，在用户点击按钮时会调用remove（）函数，并且会将$index（items中循环计数）传递过去。
每天进步一点点
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
