angular删除数据+模糊查询,排序

最新推荐文章于 2018-06-24 19:39:08 发布

原创最新推荐文章于 2018-06-24 19:39:08 发布 · 346 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的商品库存管理系统，通过该系统可以进行商品信息的展示、搜索、排序及批量删除等功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="angular-1.3.0.js"></script>
    <script>
        var app=angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
             $scope.col="bh";
             $scope.desc=0;
             $scope.shuzu=[
                 {    done:false,
                     "bh":1,
                     "Name":"小米MAX",
                     "money":2000,
                     "kc":100
                 },
                 {   done:false,
                     "bh":2,
                     "Name":"vivox9",
                     "money":2500,
                     "kc":200
                 },
                 {    done:false,
                     "bh":3,
                     "Name":"iphone8",
                     "money":8000,
                     "kc":400
                 },
                 {   done:false,
                     "bh":4,
                     "Name":"iphonex",
                     "money":9000,
                     "kc":300
                 },
                 {
                      done:false,
                     "bh":5,
                     "Name":"华为",
                     "money":3000,
                     "kc":150
                 }

]

//删除单个的

            $scope.delete=function ($index) {
                if($index>=0){
                    $scope.shuzu.splice($index,1);
                }

};

//全部删除

$scope.delete1=function ($index) {
                if($scope.shuzu.length>=0){
                    $scope.shuzu.splice($index);
                }
            };

            //删除选中的
            $scope.delete1=function () {
                for(var i=0;i<$scope.shuzu.length;i++)
                {
                    if($scope.shuzu[i].done==true)
                    {
                        $scope.shuzu.splice(i,1);
                        i--;
                    }
                }

            }
            //点击全选
            $scope.checkAll=function () {
                for(var i=0;i<$scope.shuzu.length;i++)
                {
                    if($scope.chec==true)
                    {
                        $scope.shuzu[i].done=true;
                    }
                    else{
                        $scope.shuzu[i].done=false;
                    }
                }
                $scope.num=0;
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.shuzu[i].done==true)
                    {
                        $scope.num+=$scope.shuzu[i].price*$scope.shuzu[i].count;

                    }
                }
            }
        });
    </script>
    <script>
        function myfuntion() {
            alert("您确认删除吗?")
        }
    </script>
    <title>Title</title>
</head>
<body ng-app="myApp">
<h2>商品库存信息管理</h2>
<table ng-controller="myCtrl" border="1" cellspacing="0" cellpadding="0" width="600px">
    <tr>
        <td colspan="5"><input type="text" value="" placeholder="请输入关键字" ng-model="search"></td>
        <td><button style="background-color: red;color: white" ng-click="delete1($index)" onclck="myfuntion()">批量删除</button></td>
    </tr>
    <tr>
        <td><input type="checkbox" ng-click="checkAll()" ng-model="chec"></span></td>
        <td ng-click="col='bh';desc!=desc">商品编号</td>
        <td ng-click="col='Name';desc!=desc"><a>商品名称</a></td>
        <td ng-click="col='money';desc!=desc">商品价格</td>
        <td ng-click="col='kc';desc!=desc">商品库存</td>
        <td ng-click="col='Handle';desc!=desc">商品操作</td>
    </tr>
    <tr ng-repeat="x in shuzu|filter:{'Name':search}|orderBy:col:desc">
    <td><input type="checkbox" ng-model="x.done" ng-click="counts()"></td>
        <td>{{x.bh}}</td>
        <td>{{x.Name}}</td>
        <td>{{x.money|currency:'¥'}}</td>
        <td>{{x.kc}}</td>
        <td><button style="background-color: sandybrown;color: white" ng-click="delete($index)" onclick="myfuntion()">删除</button></td>
    </tr>

</table>
</body>
</html>