angularjs的表格的增删改查（关于商品）

最新推荐文章于 2018-03-07 12:04:31 发布
最新推荐文章于 2018-03-07 12:04:31 发布
阅读量432 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_hei_1/article/details/78332867
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td, th {
            width: 200px;
            border: 1px solid gainsboro;
            text-align: center;
            padding: 20px;
        }

        button {
            width: 100px;
            height: 40px;
            background: orange;
            color: white;
            border: 0px;
            border-radius: 5px;
        }

        .search {
            background: ghostwhite;
            border: 1px solid gainsboro;
            border-radius: 5px;
            width: 1450px;
            height: 50px;
            line-height: 50px;
            margin-bottom: 10px;
        }

        .search input {
            width: 200px;
            height: 30px;
            color: #999;
            border-radius: 5px;
            margin-left: 20px;
            border: 1px solid gainsboro;
        }

        .search button {
            float: right;
            margin-top: 5px;
            margin-right: 10px;
            background: red;
        }

        .active {
            color: red;
        }
    </style>
    <script src="angular.js"></script>
    <script>
        var falg=false;
        var data =
                [{"id": 1234, "name": 'ipad', "price": 3400, "count": 10},
                    {"id": 1244, "name": 'aphone', "price": 6400, "count": 100},
                    {"id": 1334, "name": 'mypad', "price": 4400, "count": 20},
                    {"id": 8234, "name": 'zpad', "price": 8400, "count": 130},
                ];
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope) {
            $scope.ycxiugai=false;
            $scope.yctianjia=false;

            /**排污*/
            $scope.px1=function(){
                alert($scope.paixu);

                if($scope.paixu==2){
                    falg=true;
                }else{
                    falg=false;
                }

                data.sort(function(a,b){
                    if(falg){
                        return a.count< b.count?1:-1;
                    }else{
                        return a.count>b.count?1:-1;
                    }
                });
            }

            $scope.tianjia=function(){
                $scope.yctianjia=true;
            }
            $scope.xiugai=function(index){
                var jihe=$scope.data[index];
                $scope.x_id=jihe.id,
                $scope.x_name="",
                $scope.x_price="",
                $scope.x_count="",
                $scope.ycxiugai=true;
                $scope.index=index;
            }

            $scope.data = data;
            //设置页面默认显示
            data.sort(function(a,b){
                if(falg){
                    return a.count< b.count?1:-1;
                }else{
                    return a.count>b.count?1:-1;
                }
            });
            $scope.show = true;
            //设置checkbox默认不选中
            $scope.chk = false;
            $scope.xuanz = false;
            $scope.check = function (val) {
                /*判断是否选中，然后控制下方的是否选中*/
                if (val) {
                    $scope.xuanz = true;
                } else {
                    $scope.xuanz = false;
                }
            }
            $scope.search;
            /*删除按钮*/
            $scope.remove = function (index) {
                /*判断是否确认删除*/
                var b = confirm("确认删除");
                if (b) {
                    $scope.data.splice(index, 1);
                }
            }
            $scope.del = function () {
                /*判断是否确认删除*/
                if ($scope.xuanz || $scope.checkD) {
                    var b = confirm("确认删除");
                    if (b) {
                        //删除所有商品信息
                        if ($scope.chk) {
                            $scope.data.splice(0, $scope.data.length);
                            //让商品信息管理页面为空白界面
                            $scope.show = false;
                        } 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("先进行选中要删除的商品信息");
                }
            }
            /**删除全部*/
             $scope.shanchu=function(){
                 var b = confirm("确认删除");
                 if(b){
                     $scope.data.splice(0, $scope.data.length);
                     //让商品信息管理页面为空白界面
                     $scope.show = false;
                 }

             }

            /**添加*/
            $scope.tianjiaan=function(){

                if ($scope.t_id == undefined || $scope.t_id == "") {
                    alert("id不能为空！");
                    return;
                }

                if ($scope.t_name == undefined || $scope.t_name == "") {
                    alert("name不能为空！");
                    return;
                }

                if ($scope.t_price == undefined || $scope.t_price == "") {
                    alert("price不能为空！");
                    return;
                }

                if ($scope.t_count == undefined || $scope.t_count == "") {
                    alert("count不能为空！");
                    return;
                }

                if (!/^\d+$/.test($scope.t_id)) {
                    alert("id必须是整数！");
                    return;
                }

                if (!/^\d+$/.test($scope.t_price)) {
                    alert("价格必须是整数！");
                    return;
                }
                if (!/^\d+$/.test($scope.t_count)) {
                    alert("数量必须是整数！");
                    return;
                }

                $scope.data.push({
                    id:$scope.t_id,
                    name:$scope.t_name,
                    price:$scope.t_price,
                    count:$scope.t_count
                });
                data.sort(function(a,b){
                    if(falg){
                        return a.count< b.count?1:-1;
                    }else{
                        return a.count>b.count?1:-1;
                    }
                });
                        $scope.t_id="",
                        $scope.t_name="",
                        $scope.t_price="",
                        $scope.t_count=""
                $scope.yctianjia=false;

            }


            /**排序*/
            $scope.px=function(){
                if($scope.paixu==2){
                    falg=true;
                }else{
                    falg=false;
                }

                data.sort(function(a,b){
                   if(falg){
                       return a.count> b.count?1:-1;
                   }else{
                       return a.count<b.count?1:-1;
                   }
                });
            }

            $scope.xiugaian=function(){
                if ($scope.x_id == undefined || $scope.x_id == "") {
                    alert("id不能为空！");
                    return;
                }

                if ($scope.x_name == undefined || $scope.x_name == "") {
                    alert("name不能为空！");
                    return;
                }

                if ($scope.x_price == undefined || $scope.x_price == "") {
                    alert("price不能为空！");
                    return;
                }

                if ($scope.x_count == undefined || $scope.x_count == "") {
                    alert("count不能为空！");
                    return;
                }

                if (!/^\d+$/.test($scope.x_id)) {
                    alert("id必须是整数！");
                    return;
                }

                if (!/^\d+$/.test($scope.x_price)) {
                    alert("价格必须是整数！");
                    return;
                }
                if (!/^\d+$/.test($scope.x_count)) {
                    alert("数量必须是整数！");
                    return;
                }
                $scope.ycxiugai=false;
                $scope.data[$scope.index].name=$scope.x_name;
                $scope.data[$scope.index].price=$scope.x_price;
                $scope.data[$scope.index].count=$scope.x_count;
                data.sort(function(a,b){
                    if(falg){
                        return a.count< b.count?1:-1;
                    }else{
                        return a.count>b.count?1:-1;
                    }
                });
            }



            $scope.checkD = false;
            $scope.xuan1 = [];
            $scope.xuan = function (xuanl, id) {
                console.log(id);
                $scope.checkD = xuanl;
                if (xuanl) {
                    $scope.xuan1.push(id);
                }
            }
            //判断的功能,默认是名字排序

        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="search">
    <input type="text" placeholder="输入关键字…" ng-model="search">
    <select ng-model="paixu" ng-change="px1()">
        <option value="">库存正序</option>
        <option value="2">库存倒序</option>
    </select>
    <button ng-click="del()">批量删除</button>
    <button ng-click="tianjia()">添加</button>
    <button ng-click="shanchu()">删除全部</button>
</div>
<!--用来遍历对象并渲染到页面中-->
<table ng-show="show">
    <thead>
    <th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>
    <th ng-click="sort1('id')" ng-class="{active:active=='id'}">商品编号</th>
    <th ng-click="sort1('name')" ng-class="{active:active=='name'}">商品名称</th>
    <th ng-click="sort1('price')" ng-class="{active:active=='price'}">商品价格</th>
    <th ng-click="sort1('count')" ng-class="{active:active=='count'}">商品库存</th>
    <th>数据删除</th>
    <th>数据修改</th>
    </thead>
    <tbody>
    <!--实现模糊查询-->
    <tr ng-repeat="item in data| filter:search">
        <td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td>
        <td>{{item.id}}</td>
        <td> {{item.name}}</td>
        <!--商品价格前面加“￥”-->
        <td>{{item.price | currency:"￥"}}</td>
        <td>{{item.count}}</td>
        <td>
            <button ng-click="remove($index)">删除</button>
        </td>
        <td>
            <button ng-click="xiugai($index)">修改</button>
        </td>
    </tr>
    </tbody>
</table>
<div ng-show="ycxiugai">
    <p>修改商品</p>
    <p>商品编号：<input type="text" ng-model="x_id"/></p>

    <p>商品名称：<input type="text" ng-model="x_name"/></p>

    <p>商品价格：<input type="text" ng-model="x_price"/></p>

    <p>商品库存：<input type="text" ng-model="x_count"/></p>

    <p>
        <button ng-click="xiugaian($index)">修改</button>
    </p>
</div>

<div ng-show="yctianjia">
    <p>添加商品</p>
    <p>商品编号：<input type="text" ng-model="t_id"/></p>

    <p>商品名称：<input type="text" ng-model="t_name"/></p>

    <p>商品价格：<input type="text" ng-model="t_price"/></p>

    <p>商品库存：<input type="text" ng-model="t_count"/></p>

    <p>
        <button ng-click="tianjiaan($index)">添加</button>
    </p>
</div>
</body>
</html>

xiao_hei_1
关注
angularjs商品列表页代码
03-01
angularjs商品列表页代码
angularjs表格的增删改查
healer1的博客
09-20 1586
综合练习 .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } var app = angular.module("myApp",["ngRoute"]); //使用config配置路由规则 app.config(["$ro
angularjs表格表单增删改查
Liuxb_zao的博客
10-23 328
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="angular-1.3.0.js">script> script src="jquery.1.12.4.js">script> script> var app=angular.modu
angularjs 表格的增删改查
dreamflylb的博客
10-22 1002
html> html> head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; }
angularjs表格的增删改查完成功能
weixin_39792151的博客
11-23 1068
.gehang:nth-child(even){                 background-color: blueviolet;             }                                                                           angular.module("myapp",[])
AngularJS模块化开发--增删改查
12-13
在这个"AngularJS模块化开发--增删改查"的项目中，我们将会深入探讨如何利用AngularJS进行高效且结构化的应用开发，同时结合RequireJS进行模块管理，以及使用Bootstrap进行UI设计和ngRoute实现页面间的路由跳转。...
AngularJS实现表格的增删改查（仅限前端）
10-19
根据提供的文件信息，接下来将详细说明AngularJS实现表格增删改查的相关知识点。 ### AngularJS概念 AngularJS是一个开源的前端JavaScript框架，由Google维护。它可以帮助开发者使用MVW（Model-View-Whatever）...
angularjs 实现增删改查
01-28
在本文中，我们将深入探讨如何使用AngularJS实现MySQL数据库的增删改查功能，并结合后台的Java服务。AngularJS是一个强大的前端JavaScript框架，用于构建单页应用（SPA），而Java则常作为后端语言处理数据操作。让...
AngularJS实现产品列表（页面搜索，排序）
weixin_33847182的博客
11-14 426
标签属性介绍 ng-class="{className:expression}" 如果expression为true，则使用className这个class。 ng-click="functionName(pram)" 这跟onclick是一样的，点击就执行functionName(pram)。 ng-repeat="i in set | filter...
angularjs 增删改查 年龄查询
chy521xin的博客
01-16 227
tbody tr:nth-child(even){ background-color: pink; } tbody tr:nth-child(odd){ background-color: yellow; } var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $
华为编程题
sinat_32043495的博客
03-07 1038
老师想知道从某某同学当中，分数最高的是多少，现在请你编程模拟老师的询问。当然，老师有时候需要更新某位同学的成绩. 输入描述:输入包括多组测试数据。 每组输入第一行是两个正整数N和M（0 &lt; N &lt;= 30000,0 &lt; M &lt; 5000）,分别代表学生的数目和操作的数目。 学生ID编号从1编到N。 第二行包含N个整数，代表这N个学生的初始成绩，其中第i个数代表ID为i的学生...
AngularJS（基本使用）动态添加表格数据（增删改查）
mayn666的博客
12-08 7072
水果： 水果名称 操作 {{g.name}} var mb = angular.module("myApp",[]);//创建模板 mb.controller("myCtrl",function($scope){//创建控制 //定义数组 $scope.goods=[]; //添加的方法 $scope
使用AngularJS修改、删除表格数据
热门推荐
xin_x1n的博客
11-07 1万+
实现angularJS实现了表格内容的删除和修改的功能，相比直接使用原生js，angularJS显得简单方便很多，减去了DOM操作直接修改数据，将数据绑定使得页面直接根据数据内容来显示，代码更加明了快捷.这也是angularJS的应用面广泛的重要原因!
商品列表搜索查询
thw_m的博客
10-14 540
商品列表搜索查询                               var app = angular.module("myApp",[]);             app.controller("myCtrl",function($scope){                 $scope.products = [{                     id:80,
angularjs商品列表(增删改查)
DING_YZz的博客
12-18 592
var app = angular.module("myApp", []);    app.controller("myCtrl", function($scope) {     $scope.shops = [{      id: 80,      name: "iPhone",      price: 5400,      num:10,      state: false  
AngularJS实现对用户信息的增删改查
xy8199的博客
10-21 3792
本篇是对表单进行增删改查的操作，用到的是AngularJS实现的，有需要的可以看一下。 实现效果： 实现要求： 1. 搭建页面 2. 显示所有用户信息 3. 根据用户名实现用户查询显示 4. 根据年龄范围下拉菜单实现用户显示 5. 根据用户年龄实现用户显示 6. 实现批量删除功能：选中左侧多选框，点击批量删除，删除选中项，没选中提示用户，点击最上方的多选框，实现全选。
Angularjs2 公共基本列表组件
wall 技术日志
09-29 943
背景：Extjs使用久了就不想多写html了，最近使用angular4.2.4+ng-bootstrap1.0.0-alpha.25+bootstrap4.0.0-alpha.6+scss开发应用需要写html，封装成grid组件，通过ts设置即可加载显示数据 效果： 1.grid.component.html {{colu
AngularJS对表格的增删改查(仅限前端)
北屵
09-19 1792
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
基于Vue.js和Element实现表格增删改查功能
Vue.js+Element实现表格里的增删改查 Vue.js是一款流行的前端框架，Element是一款基于Vue.js的UI组件库，本文将介绍如何使用Vue.js和Element实现表格里的增删改查功能。 为什么选择Vue.js和Element 在选择前端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值