JS-購物車



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周考三</title>
    <script src="angular1.4.6.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myctrl", function ($scope) {
            $scope.goods = [
                {"id": 124, "name": "iphone", "price":"￥：5400", "num": 55,},
                {"id": 154, "name": "ipad", "price": "￥：2300", "num": 25,},
                {"id": 125, "name": "ionic", "price": "￥：9400", "num": 85,},
                {"id": 185, "name": "Andriod", "price":" ￥：3800", "num": 10,},
            ];
            $scope.bold = "bold";
            $scope.title = 'name';
            $scope.desc = 0;
            $scope.key = '';

            //刪除
            $scope.deletes =function(name){

                var p;
                for( index in     $scope.goods){
                    p = $scope.goods[index];
                    if( p.name == name){
                        $scope.goods.splice(index,1);
                        alert("是否刪除"+name+"商品");
                    }

                }

            };
            $scope.delall =function(){
                alert("刪除全部");
                $scope.goods.splice($scope.goods);
            };

            //根據(jù)標(biāo)題title排序
            $scope.togg =function(tit){
                $scope.title = tit;
                $scope.desc = !$scope.desc;

            };

        });

    </script>

</head>
<body ng-app="myApp" ng-controller="myctrl">
<center>
    <table cellpadding="10" cellspacing="0" border="1">
        <tr>

            <th><input type="text" ng-model="key" placeholder="請輸入關(guān)鍵字"></th>
            <th colspan="5" align="right" ng-click="delall()"><button style="background-color: red">批量刪除</button></th>
        </tr>
        <tr>
            <th><input type="checkbox"> </th>
            <th ng-click="goods("id=")">商品編號</th>
            <th ng-click="goods("name=")">商品名稱</th>
            <th ng-click="goods("price=")">商品價(jià)格</th>
            <th ng-click="goods("num=")">商品庫存</th>
            <th>數(shù)據(jù)操作</th>
        </tr>
        <tr ng-repeat="x in goods | filter: {name: key} | orderBy: title : desc">
            <th><input type="checkbox"> </th>
            <td>{{x.id}}</td>
            <td>{{x.name}}</td>
            <td>{{x.price}}</td>
            <td>{{x.num}}</td>
            <td>
                <button ng-click="deletes(x.name)") style="background-color: goldenrod">刪除</button>
            </td>
        </tr>

    </table>
</center>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容