使用AngularJS修改、删除表格数据

最新推荐文章于 2024-05-24 09:56:19 发布

xin_x1n

最新推荐文章于 2024-05-24 09:56:19 发布

阅读量1.1w

点赞数 1

分类专栏： web前端文章标签： angularjs 操作数据实现表格的删除修改功能

本文链接：https://blog.csdn.net/xin_x1n/article/details/53070144

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需要引入的文件下载路径：

angular.js下载： http://download.csdn.net/detail/xin_x1n/9675595

bootstra.js下载  http://download.csdn.net/detail/xin_x1n/9675592

jquery.js下载    http://download.csdn.net/detail/xin_x1n/9675588

bootstrap.css下载   http://download.csdn.net/detail/xin_x1n/9675597

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--
        因为表格样式用到了bootstrap所以首先需要引入jquery.js、bootstrap.js和bootstrap.css
        然后引入angular.js
        按照js中的代码就可以实现使用angular技术删除修改表格了
        代码中注释应该都比较完整，如果有不懂的或者建议欢迎留言讨论

        后面会继续更新，使用angular中的$http 服务向服务器请求信息从后台获取数据，这里先将数据自定义是为了弄明白angularJS的作用域，指令，控制器和视图

    -->
    <script src="js/jquery-1.12.3.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
    <script src="js/angular.js"></script>
    <script>

        //定义模块
        var ang = angular.module('module-1',[]);

        //定义控制器
        ang.controller('myCon', function ($scope) {

            //$scope表示作用域对象，每个控制器都有自己的作用域对象
            $scope.arrs = [
                {"productid":"FI-SW-01","productname":"Koi"},
                {"productid":"K9-DL-01","productname":"Dalmation"},
                {"productid":"RP-SN-01","productname":"Rattlesnake"},
                {"productid":"RP-LI-02","productname":"Iguana"},
                {"productid":"FL-DSH-01","productname":"Manx"},
                {"productid":"FL-DLH-02","productname":"Persian"},
                {"productid":"AV-CB-01","productname":"Amazon Parrot"}
            ];

            //定义一个空对象 , 用于更新和保存数据时临时存储
            $scope.prod = {};

            //定义一个单击删除按钮时触发的事件，用于删除选中行
            $scope.delete = function ($index) {

                if($index>=0){
                    if(confirm("是否删除"+$scope.arrs[$index].productid+"商品") ){
                        $scope.arrs.splice($index,1);
                    }
                }
            };

            //定义一个全局变量idx  , 用于存储选中行的索引，方便执行保存操作时保存数据
            var idx = -1;

            //定义一个单击修改按钮时触发的事件，用于单击后弹出模块窗口用于修改数据
            $scope.updata = function ($index) {

                //显示bootstrap中的模块窗口
                $('#modal-1').modal('show');

                //将选中行的数据绑定到临时对象prod中，在下面的模态窗口中展示出来
                $scope.prod.productid = $scope.arrs[$index].productid;
                $scope.prod.productname = $scope.arrs[$index].productname;
                //选中行的索引赋值给全局变量idx
                idx = $index;
            };

            //定义一个单机保存按钮时触发的事件,
            $scope.save = function () {
                //将修改后的值赋给数组
                $scope.arrs[idx].productid = $scope.prod.productid;
                $scope.arrs[idx].productname = $scope.prod.productname;
                //关闭模块窗口
                $('#modal-1').modal('hide');
            }

        })

    </script>
</head>

<body ng-app="module-1">

    <div ng-controller="myCon">

        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <table class="table">
                        <tr ng-repeat=" ar in arrs">
                            <td>{{$index}}</td>
                            <td ng-repeat="a in ar"> {{a}} </td>
                            <td><a href="javascript:void(0)" class="btn btn-primary" ng-click="updata($index)">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a ng-click="delete($index)" href="javascript:void(0)" class="btn btn-danger">删除</a></td>
                        </tr>
                    </table>

                </div>
            </div>

            <div class="modal" id="modal-1">

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">
                                <span class="glyphicon glyphicon-remove"></span>
                            </button>
                            <h3 class="modal-title">修改商品</h3>
                        </div>

                        <div class="modal-body">
                            <div>商品编号</div>
                            <input ng-model="prod.productid" value="{{prod.productid}}">
                            <div>商品名称</div>
                            <input ng-model="prod.productname" value="{{prod.productname}}">
                        </div>

                        <div class="modal-footer">
                            <button class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button class="btn btn-success" ng-click="save()">确定</button>
                        </div>

                    </div>

                </div>

            </div>

    </div>

    </div>
<p></p>


</body>
</html>

xin_x1n

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
8
评论
使用AngularJS修改、删除表格数据

实现angularJS实现了表格内容的删除和修改的功能，相比直接使用原生js，angularJS显得简单方便很多，减去了DOM操作直接修改数据，将数据绑定使得页面直接根据数据内容来显示，代码更加明了快捷.这也是angularJS的应用面广泛的重要原因!
复制链接

扫一扫