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

最新推荐文章于 2018-07-12 17:22:05 发布

Android丶ztz

最新推荐文章于 2018-07-12 17:22:05 发布

阅读量363

点赞数 1

分类专栏： AngularJS

本文链接：https://blog.csdn.net/TianzhuZ/article/details/78253497

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

Android丶ztz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS实现购物车功能,表格的删除,查询,排序功能

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("
复制链接

扫一扫

专栏目录