AngularJS增删改

来源：互联网发布：sql server 默认值编辑：程序博客网时间：2024/06/05 09:28

数据

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <script type="text/javascript" src="js/angular-1.5.5/angular.js" ></script>        <script>            var app = angular.module("myApp",[]);            app.controller("myCtrl",function($scope){                $scope.products = [{                    "id":80,                    "name":"iPhone",                    "price":5400,                    state:false                },{                    "id":1200,                    "name":"ipad mini",                    "price":2200,                    state:false                },{                    "id":500,                    "name":"ipad air",                    "price":2340,                    state:false                },{                    "id":290,                    "name":"ipad",                    "price":1420,                    state:false                },{                    "id":910,                    "name":"imac",                    "price":15400,                    state:false                }];

过滤

                //按照年龄进行过滤                $scope.search = "";                //下拉菜单过滤商品价格范围                $scope.productPrice = "--请选择--";                $scope.isShow = function(price){                    if($scope.productPrice == "--请选择--"){                        return true;                    }else{                        var priceArr = $scope.productPrice.split("-");                        var min = priceArr[0];                        var max = priceArr[1];                        if(price < min || price > max){                            return false;                        }else{                            return true;                        }                    }                }

全选全不选

                //全选                $scope.selectAll = false;                $scope.selectAllFun = function(){                    if($scope.selectAll){                        for(index in $scope.products ){                            $scope.products[index].state = true;                        }                    }else{                        for(index in $scope.products ){                            $scope.products[index].state = false;                        }                    }                }                //全不选                $scope.checkSelectAll = function(){                    var a = 0                    for(index in $scope.products){                        if(!$scope.products[index].state){                            $scope.selectAll = false;                        }else{                            a++;                        }                        if(a == $scope.products.length){                            $scope.selectAll = true;                        }else{                            $scope.selectAll = false;                        }                    }                }

批量删除单个删除

                //批量删除                $scope.delSelect = function(){                    var arr = [];                    for(index in $scope.products){                        if($scope.products[index].state ){                            arr.push($scope.products[index].name);                        }                    }                    if(arr.length <= 0){                        alert("请选择删除项！！！");                    }else{                        if(window.confirm("确定删除吗？")){                            for(index in arr ){                                for(index2 in $scope.products){                                    if(arr[index] == $scope.products[index2].name ){                                        $scope.products.splice(index2,1);                                    }                                }                            }                        }                    }                }                //单行删除                $scope.del = function(name){                    if(window.confirm("确定删除吗")){                        for(index in $scope.products){                        if(name == $scope.products[index].name){                            $scope.products.splice(index,1);                        }                    }                    }                }

添加商品并验证

                //新增商品                $scope.formShow = false;                $scope.formShowFun = function(){                    if($scope.formShow){                        $scope.formShow = false;                    }else{                        $scope.formShow = true;                        $scope.updateShow=false;                    }                }                //提交新加商品进行验证                $scope.newId = "";                $scope.newName = "";                $scope.newPrice = "";                $scope.checkSub = [];                $scope.divShow = false;                $scope.tijiao = function(){                    $scope.checkSub = [];                    if($scope.newId == "" || $scope.newId == null){                        $scope.checkSub.push("产品编号为空");                    }else if(isNaN($scope.newId)){                        $scope.checkSub.push("产品编号不是整数");                    }                    if($scope.newName == "" || $scope.newName == null){                        $scope.checkSub.push("产品名称为空");                    }                    if($scope.newPrice == "" || $scope.newPrice == null){                        $scope.checkSub.push("产品价格为空");                    }else if(isNaN($scope.newPrice)){                        $scope.checkSub.push("产品价格不是整数")                    }                    if($scope.checkSub.length > 0){                        $scope.divShow = true;                    }else{                        $scope.divShow = false;                        var newPro = {                            "id":parseInt($scope.newId),                            "name":$scope.newName,                            "price":parseInt($scope.newPrice),                             state:false                        };                        $scope.products.push(newPro);                    }                }

修改页面

//修改页面                $scope.updateShow = false;                $scope.updateId = "";                $scope.updateName = "";                $scope.updatePrice = "";                $scope.updateShowFun = function(pro) {                    $scope.updateShow = true;                    $scope.formShow = false;                    $scope.updateId = pro.id;                    $scope.updateName = pro.name;                    $scope.updatePrice = pro.price;                }                $scope.updateSub = function() {                    $scope.updateArr = [];                    if($scope.updateName == "" || $scope.updateName == null) {                        $scope.updateArr.push("产品名称为空");                    }                    if($scope.updatePrice == "" || $scope.updatePrice == null) {                        $scope.updateArr.push("产品价格为空");                    } else if(isNaN($scope.updatePrice)) {                        $scope.updateArr.push("产品价格不是整数");                    }                    //验证不满足                    if($scope.updateArr.length > 0) {                        $scope.haha = true;                    } else {                        $scope.haha = false;                        for(index in $scope.products) {                            if(parseInt($scope.updateId) == $scope.products[index].id) {                                $scope.products[index].name = $scope.updateName;                                $scope.products[index].price = $scope.updatePrice;                                $scope.updateShow = false;                            }                        }                    }                }            });        </script>    </head>

主界面

<body ng-app="myApp" ng-controller="myCtrl">        <center>        <h3>购物车</h3>        <input type="text" placeholder="产品名称" size="10" ng-model="search"/>产品名称        <select ng-model="productPrice">            <option>--请选择--</option>            <option>0-2000</option>            <option>2001-3000</option>            <option>3001-4000</option>            <option>4001-5000</option>            <option>5001-6000</option>            <option>6001-7000</option>            <option>7001-8000</option>            <option>8001-无穷大</option>        </select>        <select ng-model="selOrder">            <option value="">排序方式</option>            <option value="id">id正序</option>            <option value="-id">id倒序</option>            <option value="price">价格正序</option>            <option value="-price">排价格倒序</option>        </select>        <button ng-click="delSelect()">批量删除</button>        <br /><br />        <table border="1px solid blue" cellpadding="8" cellspacing="0">            <thead>                <tr>                    <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></th>                    <th>产品编号</th>                    <th>产品名称</th>                    <th>产品价格</th>                    <th>操作</th>                </tr>            </thead>            <tbody>            <tr ng-repeat="pro in products | filter:{'name':search} | orderBy:selOrder" ng-show="isShow(pro.price)">                <td><input type="checkbox" ng-model="pro.state" ng-click="checkSelectAll()"></td>                <td>{{pro.id}}</td>                <td>{{pro.name}}</td>                <td>{{pro.price}}</td>                <td>                    <button ng-click="del(pro.name)">删除</button>                    <button ng-click="updateShowFun(pro)">修改</button>                </td>            </tr>        </tbody>        </table><br /><br />        <button ng-click="formShowFun()">添加新产品</button>

添加商品界面

<form style="border: 1px solid blue; width: 300px;" ng-show="formShow">            <h3>添加商品</h3>商品编号：            <input type="text" placeholder="商品编号" ng-model="newId"/><br /><br />商品名称：            <input type="text" placeholder="商品名称" ng-model="newName"/><br /><br />商品价格：            <input type="text" placeholder="商品价格" ng-model="newPrice"/><br /><br />            <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow">                <ul>                    <li ng-repeat="chenk in checkSub">{{chenk}}</li>                </ul>            </div><br />            <input type="button" value="提交"  ng-click="tijiao()"/>        </form>

修改商品的界面

<form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">            <h3>修改商品</h3>商品编号：            <input type="text" placeholder="商品编号" ng-model="updateId"/><br /><br />商品名称：            <input type="text" placeholder="商品名称" ng-model="updateName"/><br /><br />商品价格：            <input type="text" placeholder="商品价格" ng-model="updatePrice"/><br /><br />            <div style="border: 1px solid blue; width: 250px; background-color: pink;>                <ul>                    <li ng-repeat="chenk in checkSub">{{chenk}}</li>                </ul>            </div><br />            <input type="button" value="提交" ng-click="updateSub()" />        </form>    </body></html>

阅读全文

0 0