angularJS實例之購物車

<!doctype html>
<html lang="en" ng-app="Cartmodel">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</head>
<body>
    <div ng-controller="CartController">
        <h1>angularjs 購物車</h1>
        <div ng-repeat='item in items'>
            <span>{{item.title}}</span>
            <input type="text" ng-model='item.num'>
            <span>{{item.price|currency}}</span>
            <span>{{item.price*item.num|currency}}</span>
            <button ng-click="cancle($index)">刪除</button>
        </div>
    </div>
    <script>
var Cartmodel=angular.module('Cartmodel',[]);
Cartmodel.controller('CartController',function($scope){
$scope.items=[
    {title:"牛肉",num:"2",price:"20"},
    {title:"羊肉",num:"3",price:"20"},
    {title:"豬肉",num:"1",price:"30"}
]

$scope.cancle=function(index){
//console.log(index);
$scope.items.splice(index,1);
console.log("刪除成功");
}
});
    </script>
</body>
</html>
發佈了75 篇原創文章 · 獲贊 5 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章