angular js 实现购物车模糊查询删除全选_angular js搜索框模糊查询全选-优快云博客

本文链接：https://blog.youkuaiyun.com/lyb249473330/article/details/78051733

本文介绍了一个使用AngularJS实现的商品管理系统示例，包括商品信息的显示、排序、过滤及批量删除等功能。通过该示例可以了解AngularJS如何与HTML结合进行数据绑定和交互操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
            margin-top: 10px;

        }
        th,td{
            border: 1px solid #000000;
            text-align: center;
            width: 80px;
            height: 35px;
        }
        .color{
            color: red;
        }
    </style>
    <!--引入angular.min.js-->
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        /*定义数据*/
        var data=[
            {bh:1234,name:'ipad',price:3400.00,num:10,check:false},
            {bh:1244,name:'aphone',price:6400.00,check:false},
            {bh:1334,name:'mypad',price:4400.00,check:false},
            {bh:8234,name:'zpad',price:8400.00,check:false}
        ];
        var app=angular.module("myapp",[]);
        app.controller("myContrl",function ($scope) {
            $scope.data=data;
            /*排序功能实现类*/
            /*默认按照name排序*/
            $scope.sort="name";
            /*当name为false时是倒叙*/
            $scope.active=false;
            /*当点相对应的字段时执行此方法*/
            $scope.sortfun=function (colnum) {
                console.log(colnum);
                /*判断这两个字段是否相等*/
                if($scope.sort==colnum){
                    /*两个一样是样它自己不等于它自己*/
                    $scope.active=!$scope.active;
                }else {
                    $scope.active=false;
                }
                /*把字段的名字负值给$scope.sort*/
                $scope.sort=colnum;
            };

            /*添加一个类的方法改变字体的颜色*/
            $scope.getclass=function (colnum) {
                if($scope.sort==colnum){
                    return "color";
                }
            };
            /*实现全选和反选*/
            $scope.checked=false;
            /*判断要选的按钮是否选中*/
            $scope.checkAll=function () {
                if ($scope.checked==true){
                    for (var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=true;
                    }
                }else {
                    for (var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=false;
                    }
                }
            };
            /*实现批量删除*/
            $scope.deleteAll=function () {
                for (var i=0;i<$scope.data.length;i++){
                    /*判断选中时*/
                    if($scope.data[i].check==true){
                        /*删除当前行*/
                        $scope.data.splice(i,1);
                        i--;
                    }
                }
            }

        });
    </script>
</head>
<body ng-app="myapp" ng-controller="myContrl">
<input type="text" placeholder="请输入关键字..." ng-model="ss" >
<button ng-click="deleteAll()">批量删除</button>
<table ng-show="show">
    <thead>
    <tr>
        <th><input type="checkbox"  ng-model="checked" ng-click="checkAll()"></th>
        <th ng-click="sortfun('bh')" ng-class="getclass('bh')">商品编号</th>
        <th ng-click="sortfun('name')" ng-class="getclass('name')">商品名称</th>
        <th ng-click="sortfun('price')" ng-class="getclass('price')">商品价格</th>
        <th ng-click="sortfun('num')" ng-class="getclass('num')">商品库存</th>
        <th>数据操作</th>
    </tr>
    </thead>
    <tbody>
    <!--ng-repeat遍历数据, filter 模糊查询过滤 , orderBy 排序-->
    <tr ng-repeat="item in data|filter:ss|orderBy:sort:active">
        <td><input type="checkbox" ng-model="item.check" ></td>
        <td>{{item.bh}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price|currency:'￥'}}</td>
        <td>{{item.num}}</td>
        <td><button ng-click="remove($index)">删除</button></td>
    </tr>
    </tbody>
</table>
</body>
</html>