AngularJS实现购物车功能,表格的删除,查询,排序功能

来源：互联网发布：经典电影插曲知乎编辑：程序博客网时间：2024/04/28 11:35
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>AngularJS实现表格的删除,查询,排序功能</title>    <script src="angular.js"></script>    <script type="text/javascript">        var app = angular.module("myApp",[]);        app.controller("myCtrl",function ($scope) {            $scope.shuzu = [{                id:80,                name:"iphone",                price:5400            },{                id:150,                name:"ipad mini",                price:2200            },{                id:120,                name:"ipad air",                price:2340            },{                id:160,                name:"ipad",                price:1420            },{                id:130,                name:"imac",                price:15400            }];            $scope.aflag = "-";            $scope.aname = "name";            $scope.paixu = function (clomnName) {                alert(clomnName);                $scope.aname = clomnName;                //判断                if($scope.aflag == "-"){                    $scope.aflag = "";                }else{                    $scope.aflag = "-"                }            };            $scope.deleteName = function (name) {                for(index in $scope.shuzu){                    if($scope.shuzu[index].name == name){                        $scope.shuzu.splice(index,1);                    }                }            }            $scope.deleteAll = function () {                $scope.shuzu = null;            }        });    </script></head><body ng-app="myApp" ng-controller="myCtrl">    <center>        <h3>商品列表</h3>        <input type="text" placeholder="商品名称" ng-model="textName">        <button ng-click="deleteAll()">删除全部</button><br/><br/>        <table border="1" cellpadding="10" cellspacing="0">            <tr>                <th ng-click="paixu('id')">产品编号</th>                <th ng-click="paixu('name')">产品名称</th>                <th ng-click="paixu('price')">产品价格</th>                <th>功能</th>            </tr>            <tr ng-repeat="i in shuzu | filter:textName | orderBy:(aflag+aname)">                <td>{{i.id}}</td>                <td>{{i.name}}</td>                <td>{{i.price}}</td>                <td><button ng-click="deleteName(i.name)">删除</button></td>            </tr>        </table>    </center></body></html>
阅读全文
1 0