AngularJs表格 增加、删除、关键字查询、按数量排序

最新推荐文章于 2020-12-22 04:29:34 发布
最新推荐文章于 2020-12-22 04:29:34 发布
阅读量215 收藏
点赞数
分类专栏： AngularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xw_414/article/details/79047376
版权
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>

    </head>

    //导入类库

    <script src="../libs/jquery-1.11.0.min.js"></script>
    <script src="../libs/angular.min.js"></script>
    <script src="../libs/angular-route.min.js"></script>

    <style type="text/css">
        .div1 {
            width: 700px;
            height: 50px;
        }
        
        .div2 {
            float: right;
            border: 1px solid blue;
            width: 100px;
            background: greenyellow;
            text-align: center;
            margin-top: 15px;
        }
        
        .table {
            width: 700px;
            height: 50px;
        }
        
        .div2 a {
            text-decoration: none;
        }
        
        select {
            margin-top: 15px;
            margin-left: 200px
        }
        //偶数行变色
        tr:nth-of-type(odd) {
            background: #CCCCCC;
        }
        
        tr:nth-of-type(odd):hover {
            background-color: hotpink;
        }
        //奇数行变色
        tr:nth-of-type(even) {
            background-color: lightpink;
        }
        
        tr:nth-of-type(even):hover {
            background-color: lightblue ;
        }
        
        fieldset {
            width: 700px;
        }
    </style>

    <body ng-app="App" ng-controller="DemoCtrl">
        <h1>商品库存管理系统</h1>
        <div class="div1">
            <input type="text" placeholder="请输入关键词" ng-model="chaxu" style="margin-top: 15px;" />
            <input type="button" value="查询" ng-click="cx()" style="margin-top: 15px;" />

            <select ng-change="x1()" ng-model="count1" ng-init="count1=counts[1]">
                <option ng-repeat="count in counts">{{count}}</option>
            </select>
            <div class="div2">
                <a href="#" ng-click="rk()">入库</a>
            </div>
        </div><br />
        <table border="1" cellspacing="0" cellpadding="0" class="table">
            <tr>
                <td>货物名称</td>
                <td>货物数量</td>
                <td>货物产地</td>
                <td>货物单价</td>
                <td>货物的生产日期</td>
                <td>操作</td>
            </tr>

            <tr ng-repeat="good in goods">
                <td>{{good.gname}}</td>
                <td>{{good.gcount}}</td>
                <td>{{good.gsite}}</td>
                <td>{{good.gprice | currency:"￥"}}</td>
                <td>{{good.gdate | date:'yyyy-MM-dd hh:mm:ss'}}</td>
                <td><input type="button" value="删除" ng-click="dele($index)" /></td>

            </tr>
        </table>

        <fieldset style="margin-top: 20px;" ng-show="sos">
            <legend>新增物品</legend>
            货物名称<input type="text" ng-model="name1" />
            <span id="sp1"></span><br /> 货物数量

            <input type="text" ng-model="counts1" />
            <span id="sp2"></span><br /> 货物产地

            <input type="text" ng-model="site1" />
            <span id="sp3"></span><br /> 货物单价

            <input type="text" ng-model="price1" />
            <span id="sp4"></span><br />

            <input type="button" value="保存" ng-click="bz()" />

        </fieldset>
        <script type="text/javascript">
            var mo = angular.module("App", []);
            mo.controller("DemoCtrl", function($scope) {
                var aa = new Date();
                $scope.counts = ["按数量正序", "按数量倒叙"];

                var good_1 = [{
                    "gname": "云南白药",
                    "gcount": "100",
                    "gsite": "云南",
                    "gprice": "19.9",
                    "gdate": aa
                }, {
                    "gname": "999感冒颗粒",
                    "gcount": "30",
                    "gsite": "北京",
                    "gprice": "12.9",
                    "gdate": aa
                }, {
                    "gname": "感康",
                    "gcount": "20",
                    "gsite": "河北",
                    "gprice": "16.9",
                    "gdate": aa
                }]

                $scope.goods = good_1;
                //  5.实现排序功能。可以按照库存数量正（倒）排序。
                $scope.x1 = function() {
                    var s1 = $scope.count1;
                    alert(s1);

                    if(s1 == "按数量正序") {
                        $scope.goods.sort(function(a, b) {
                            return a.gcount - b.gcount;
                        })

                    } else {
                        $scope.goods.sort(function(a, b) {
                            return b.gcount - a.gcount;
                        })
                    }
                }

                //实现删除的功能
                $scope.dele = function($index) {
                        var flas = confirm("是否删除");

                        if(flas = true) {
                            $scope.goods.splice($index, 1);
                            // ）splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
                        }
                    }
                    //关键字查询的功能
                $scope.cx = function() {

                    $scope.goods = [{
                        "gname": "云南白药",
                        "gcount": "100",
                        "gsite": "云南",
                        "gprice": "19.9",
                        "gdate": aa
                    }, {
                        "gname": "999感冒颗粒",
                        "gcount": "30",
                        "gsite": "北京",
                        "gprice": "12.9",
                        "gdate": aa
                    }, {
                        "gname": "感康",
                        "gcount": "20",
                        "gsite": "河北",
                        "gprice": "16.9",
                        "gdate": aa
                    }]

                    var zz = [];
                    var cc = $scope.chaxu;

                    for(var i = 0; i < $scope.goods.length; i++) {
                        if($scope.goods[i].gname.indexOf(cc) != -1 || $scope.goods[i].gsite.indexOf(cc) != -1) {

                            zz.push($scope.goods[i]);
                        }

                    }

                    $scope.goods = zz;
                }

                //实现入库的功能
                $scope.rk = function() {
                    $scope.sos = true;
                }

                //把数据保存
                //把数据保存
                $scope.bz = function() {

                    var name = $scope.name1;
                    var count = $scope.counts1;
                    var site = $scope.site1;
                    var price = $scope.price1;

                    //判断名称栏非空
                    var flas_name = true
                    if(name == null || name == "") {
                        $("#sp1").html("名称不能为空")
                        flas_name = false;
                        return

                    } else {
                        $("#sp1").html("");
                        flas_name = true
                    }

                    //判断数量栏非空
                    var flas_count = true
                    if(count == null || count == "") {
                        $("#sp2").html("不能为空")
                        flas_count = false;
                        return
                    } else {
                        $("#sp2").html("")
                        flas_count = true
                    }

                    //判断产地栏非空
                    var flas_site = true
                    if(site == null || site == "") {
                        $("#sp3").html("不能为空")
                        flas_site = false
                        return
                    } else {
                        $("#sp3").html("")
                        flas_site = true
                    }

                    //判断单价栏非空
                    var flas_price = true
                    if(price == null || price == "") {
                        $("#sp4").html("不能为空")
                        flas_price = false;
                        return
                    } else {
                        $("#sp4").html("")
                        flas_price = true
                    }

                    //添加到表格中相对应 该值的位置
                    var qiu2 = {
                            "gname": $scope.name1,
                            "gcount": $scope.counts1,
                            "gsite": $scope.site1,
                            "gprice": $scope.price1,
                            "gdate": aa
                        }
                        //添加到默认的数组中
                    good_1.push(qiu2);
                    $scope.goods = good_1;
                    //添加完毕后隐藏添加界面
                    $scope.sos = false;
                    //把输入框恢复成空白
                    $scope.name1 = ""
                    $scope.counts1 = ""
                    $scope.site1 = ""
                    $scope.price1 = ""
                }
            })
        </script>
    </body>

</html>
fairy_414
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
妙用Angularjs实现表格按指定列排序
12-29
使用AngularJS的过滤器，可以很容易的实现在表格中，点击某一列标题进行排序，实现过程如下： html代码： <table class=table ng-app=myapp ng-controller=orderByCtrl> <thead> <tr> <th>inx</th> <th ng-click=col desc=!desc>name</th> <!-- 当点击列标题时，执行click事件，将排序条件反转，即，如果原来是升序则将按降序，降序亦如此 --> <th n
angularJs 表格添加删除修改查询方法
10-18
下面小编就为大家分享一篇angularJs 表格添加删除修改查询方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
AngularJS 表格(带有CSS样式)
adiking520110的博客
12-30 322
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta...
Angularjs轻松实现表格按指定列排序
diaojian2679的博客
07-26 111
Angularjs轻松实现表格按指定列排序 使用Angularjs的过滤器，可以很容易的实现在表格中，点击某一列标题进行排序，实现过程如下： html代码： <table class="table table-border" ng-app="myapp...
AngularJS过滤器应用之表头排序
xyphf的博客
11-14 2914
需求解释：表头排序指的是使用列表方式显示数据时，如果用户单击列表中某列头部元素，那么列表中的全部数据将会自动按该列表的属性值自动排序，默认为升序，再次单击为降序；案例如下： 先贴代码：<!doctype html> <html ng-app="a3_4"> <head> <title>表头排序</title> <script src="../Script/angular.min.j
angular表格添加_AngularJS表格添加序号的方法
weixin_39826342的博客
12-22 499
本文实例讲述了AngularJS表格添加序号的方法。分享给大家供大家参考，具体如下：1、问题背景AngularJS表格需要序号，可以利用$index来作为序号2、实现实例AngularJS之表格序号table,th,td{border-collapse: collapse;}table tr:nth-child(even){background-color: #F7E1B5;}table tr:n...
angularjs实现搜索的关键字在正文中高亮出来
01-21
我们希望搜索的关键字在正文中高亮出来，正文内容就是过滤器的第一个参数，第二个参数就是搜索关键字，这样，我们的过滤器将会有两个参数了。 高亮的原理很简单，将需要高亮的内容使用 span 标记隔离出来，再加上一...
AngularJS 的小demo——表头排序+表格搜索（过滤器）
梦空间
08-21 7117
使用AngularJS简单实现表头排序和表格搜索的功能，效果如下： 点击表头中的一项，可以根据该列属性对数据进行排序：        程序如下： AngularJS 过滤器-表头排序+表格搜索 body {font-size: 20px;} ul {list-style-type: none; width: 408px; margin: 0; padd
Angularjs实现表格按指定列排序
w592376568的博客
09-19 829
&lt;table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;inx&lt;/th&gt; &lt;th ng-click="col='na
AngularJs实现表格点击不同字段排序的功能
潇湘夜雨
10-16 2239
主布局里面的代码 h2>我是购物车h2> div class="search"> input type="text" placeholder="输入关键字…" ng-model="serch"> button ng-click="moreDel()">批量删除button> div> table> thead> th>input type="checkbox"
angularjs中对表格数据进行增删改查操作详细
qq_40071033的博客
10-22 940
AngularJS 中对表格数据进行操作 AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。 AngularJS 学习起来非常简单。 好了,现在说说AngularJS 中怎么对表格中的数据进行增删改查操作的; 我写了个小
AngularJs的点击删除，排序，查询
霸气的名字
09-17 1145
删除，排序，查询                       week3code                             //定义一个数组     var user=[     {id:80,name:"iphone",price:54000},     {id:1200,name:"ipad mini",price:24000},
AngularJS增、删、改、查
xw_414的博客
01-18 275
.cls1 {                float: left;                margin-left: 560px;            }                        .cls2 {                float: left;                margin-left: 40px;            }          
angularjs购物车，排序，筛选，全选，删除，确认是否删除
zxx_fly的博客
09-18 2061
html lang="en"> head> meta charset="UTF-8"> title>第三周周考title> script src="angular1.4.6.min.js">script> script src="jquery-3.2.1.js">script> script> var app=angular.module("
AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
热门推荐
IT全栈 华强工作室
11-26 6万+
这个是为后面的cancel做准备的，当你放弃修改的时候，你希望你的值恢复成原样，这个时候，对于angularJS来说，是要对model恢复原样。再往下呢就是对edit click事件的延伸，我们要得到employee name的inputbox，然后对他进行css的转换，比如当你click edit后，应该出现inputbox的css的inactive或者active的调整，并且移除readOnly。当你找到之后呢，就要对这个DOM进行操作，对于我们来说，就是对他绑定一个click的事件。
AngularJs动态添加元素和删除元素
weixin_34290631的博客
09-16 783
动态添加元素和删除元素 //通过$compile动态编译html var html="<div ng-click='test()'>我是后添加的</div>"; var template = angular.element(html); var mobileDialogElement = $compile(template)($scope); ...
服务器虚拟化部署方案.doc
06-29
服务器、电脑、
北京市东城区人民法院服务器项目.doc
最新发布
06-29
服务器、电脑、
前端AngularJS写下拉删除按钮
06-09
以下是一个基本的AngularJS下拉删除按钮的示例： ```html <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedItem" ng-options="item as item.name for item in items"> <option value="">--请选择--</option> </select> <button ng-click="deleteItem()">删除</button> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.items = [ {id: 1, name: '选项1'}, {id: 2, name: '选项2'}, {id: 3, name: '选项3'}, {id: 4, name: '选项4'}, {id: 5, name: '选项5'} ]; $scope.deleteItem = function() { var index = $scope.items.indexOf($scope.selectedItem); if (index > -1) { $scope.items.splice(index, 1); $scope.selectedItem = null; } }; }); </script> ``` 在这个示例中，我们首先定义了一个下拉框，它使用了AngularJS提供的ng-options指令来动态生成选项。接着我们定义了一个删除按钮，并且给它绑定了一个click事件处理函数deleteItem()。在deleteItem()函数中，我们首先获取当前选中的选项在数组中的索引，然后使用splice()方法从数组中删除该选项。最后我们将selectedItem变量设置为null，以确保下拉框中不会再有任何选项被选中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值