angularJS实例之购物车

最新推荐文章于 2019-08-05 04:26:52 发布

原创最新推荐文章于 2019-08-05 04:26:52 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #实例

angularJS 专栏收录该内容

10 篇文章

订阅专栏

本文展示了一个使用AngularJS实现的简易购物车示例。该示例包括商品名称、数量输入框、单价显示及总价计算等功能，并实现了商品的删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>