前端开发之查询、CheckBox全选、全删除、排序、添加、修改、批量删代码实例

查询

<tr ng-repeat="item in data| filter:search  " ng-class="{even_cls: !$even, odd_cls: !$odd}">

CheckBox全选

 <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>

   <td><input type="checkbox" ng-model="xuanz" ngclick="xuan(xuanz,item.id)"></td>

全删除

  $scope.removeAll = function () {
                var b = confirm("确认全部删除");
                if(b){
                    $scope.data = [];
                }
            };

排序

    <select style="width: 200px;" ng-model="count1" ng-change="order2()">
        <option value="">倒序排序</option>
        <option value="2">正序排序</option>
    </select>
   $scope.order2 = function (num) {
                if($scope.count1==2){
                    flag=true;
                }else{
                    flag=false;
                }
                data.sort(function(a,b){
                    if(flag){
                        return a.count> b.count?1:-1;
                    }else{
                        return a.count< b.count?1:-1;
                    }
                })
            }

添加

var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function ($scope) {
        $scope.data.push({
            id:$scope.id,
            name:$scope.name,
            price:$scope.price,
            count:$scope.count
        });
        $scope.id="";
        $scope.name="";
        $scope.price="";
        $scope.count="";
        $scope.addUserIsShow = false;
    });
    $scope.addUser = function(){
        $scope.addUserIsShow = true;
    };

修改

//修改内容
<input type="text" ng-model="e_id"/>
<td><button ng-click="editUser($index)">修改内容</button></td>
$scope.editUser = function (index) {    var item = $scope.data[index];    $scope.e_id = item.id;    $scope.e_name = "";    $scope.e_price = "";    $scope.e_count = "";    $scope.editUserIsShow = true;    $scope.index = index;};$scope.edit = function () {    $scope.data[$scope.index].name = $scope.e_name;    $scope.data[$scope.index].price = $scope.e_price;    $scope.data[$scope.index].count = $scope.e_count;    $scope.addUserIsShow = false;    $scope.editUserIsShow = false;};

批量删

$scope.remove = function (inde) {
    var b = confirm("确认删除");
    if (b) {
        $scope.data.splice(inde, 1);
    }
}
$scope.del = function () {
    if ($scope.xuanz || $scope.checkD) {
        var b = confirm("确认删除");
        if (b) {
            //删除所有商品信息
            if ($scope.chk) {
                $scope.data.splice(0, $scope.data.length);
            } else {
                for (var i = $scope.xuan1.length - 1; i >= 0; i--) {
                    console.log($scope.xuan1[i]);
                    for (var j = 0; j < $scope.data.length; j++) {
                        console.log($scope.data[j].id == $scope.xuan1[i]);
                        if ($scope.data[j].id == $scope.xuan1[i]) {
                            $scope.data.splice(j, 1);
                        }
                    }
                }
            }
        }
    } else {
        alert("先进行选中要删除的商品信息");
    }
}