这次学习angularJS的一个很重要的知识点---- Directives.
假设现在要实现一个购物车显示与编辑功能。
默认的,没有使用angularJS之前的纯 html
假设现在要实现一个购物车显示与编辑功能。
默认的,没有使用angularJS之前的纯 html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script >
</script>
</head>
<body>
<h1>Your Shopping Cart</h1>
<div>
<label>Name: </label> <label>数量: </label><label>Price</label> <label>Total</label> <label>删除</label>
</div>
<div>
<label>Cat</label><input size="3" /><label>1.00</label> <label>10.00</label><button>Remove</button>
</div>
<div>
<label>Dog</label><input size="3" /><label>2.50</label> <label>10.00</label><button>Remove</button>
</div>
<div>
<label>Pig</label><input size="3" /><label>29.0</label> <label>261.0</label><button>Remove</button>
</div>
</body>
</html>
在正式使用directives 之前,先复习一下前面的基本知识,不过,这次我们学习使用 module
<!DOCTYPE html>
<html ng-app="bobApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script >
var bobAppModule = angular.module("bobApp", []);
bobAppModule.controller("CartController", function ($scope) {
$scope.title = "Bob's Shopping Cart";
});
</script>
</head>
<body ng-controller="CartController">
<h1>{{title}}</h1>
....
</body>
</html>
浏览器访问,可以看到 bob's shopping cart 显示出来。(注:如果未成功,请翻墙,确保angular.mini.js 可以访问)
接下来,学习一下 ng-repeat 的使用:
接下来,学习一下 ng-repeat 的使用:
<!DOCTYPE html>
<html ng-app="bobApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script type="text/javascript">
var bobAppModule = angular.module("bobApp", []);
bobAppModule.controller("CartController", function ($scope) {
$scope.title = "Bob's Shopping Cart";
$scope.items = [
{"name": "Dog", "num": 5, "price": 2.5},
{"name": "Cat", "num": 2, "price": 1.5},
{"name": "Pig", "num": 1, "price": 9.5},
];
});
</script>
</head>
<body ng-controller="CartController">
<h1>{{title}}</h1>
<div>
<label>Name: </label> <label>数量: </label><label>Price</label> <label>Total</label> <label>删除</label>
</div>
<div ng-repeat = "item in items">
<label>{{item.name}}</label><input ng-model="item.num" type="text" size="3" value="{{item.num}}"/><label>{{item.price}}</label> <label>{{item.num * item.price}}</label><button>Remove</button>
</div>
</body>
</html>
这样,就能看到 Dog, Cat , Pig 三项内容了。
下面,学习如果增加按钮点击事件,来删除某一项内容
下面,学习如果增加按钮点击事件,来删除某一项内容
<!DOCTYPE html>
<html ng-app="bobApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script >
var bobAppModule = angular.module("bobApp", []);
bobAppModule.controller("CartController", function ($scope) {
$scope.title = "Bob's Shopping Cart";
$scope.items = [
{"name": "Dog", "num": 5, "price": 2.5},
{"name": "Cat", "num": 2, "price": 1.5},
{"name": "Pig", "num": 1, "price": 9.5},
];
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
});
</script>
</head>
<body ng-controller="CartController">
<h1>{{title}}</h1>
<div>
<label>Name: </label> <label>数量: </label><label>Price</label> <label>Total</label> <label>删除</label>
</div>
<div ng-repeat = "item in items">
<label>{{item.name}}</label><input ng-model="item.num" size="3" value="{{item.num}}"/><label>{{item.price}}</label> <label>{{item.num * item.price}}</label><button ng-click="remove($index)">Remove</button>
</div>
</body>
</html>
只要增加 "ng-click" 指定处理函数,在remove中处理 $scope.items数组 就可以了。
原文件如下: 收工!
原文件如下: 收工!
angularjs.html |