<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>实现表格的增删改查</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="js/bootstrap.js"></script>

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <style>

        .add{

            position:relative;

            top:-40px;

            left:1000px;

        }

    </style>

  </head>

  <body>

    <div ng-app="myapp" ng-controller="myCtrl">

        <h2>管理信息：</h2><br>

        <p>搜索：<input type="text" placeholder="请输入关键字" ng-model="test"></p>

        <button class="btn btn-primary add" ng-click="add()">添加</button>

        <table class="table table-bordered" style="text-align: center">

            <thead>

                <tr>

                    <td>姓名</td>

                    <td>年龄</td>

                    <td>城市</td>

                    <td>操作</td>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="x in texts | filter:test">

                    <td>{{x.name}}</td>

                    <td>{{x.age}}</td>

                    <td>{{x.city}}</td>

                    <td>

                        <button class="btn btn-warning"" ng-click="update($index)">修改</button>&nbsp;

                        <button class="btn btn-danger" ng-click="del($index)">删除</button>

                    </td>

                </tr>

            </tbody>

        </table>

        <!-- 添加信息 -->

        <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="newName" type="text">

                            <div>年龄：</div>

                            <input ng-model="newAge" type="text">

                            <div>城市：</div>

                            <input ng-model="newCity" type="text">

                        </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 class="modal" id="modal-2">

                <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.name" value="{{prod.name}}" type="text">

                            <div>年龄：</div>

                            <input ng-model="prod.age" value="{{prod.age}}" type="text">

                            <div>城市：</div>

                            <input ng-model="prod.city" value="{{prod.city}}" type="text">

                        </div>

                        <div class="modal-footer">

                            <button class="btn btn-default" data-dismiss="modal">关闭</button>

                            <button class="btn btn-success" ng-click="ensure()">确定</button>

                        </div>

                    </div>

                </div>

            </div>

    </div>

    <script type="text/javascript">

        var app = angular.module('myapp',[]);

        app.controller('myCtrl',function($scope){

            //定义表格内容

            $scope.texts = [

                {name:"张三",age:"23",city:"海南"},

                {name:"李四",age:"25",city:"香港"},

                {name:"王五",age:"25",city:"济南"},

                {name:"刘六",age:"22",city:"济南"},

                {name:"李七",age:"35",city:"烟台"},

                {name:"张八",age:"32",city:"聊城"},

                {name:"吕九",age:"30",city:"盘锦"}

            ];

            //定义一个空对象，用于保存和修改数据时临时存储

            $scope.prod = {};

            //定义一个单击删除按钮时触发的事件，用于删除选中行

            $scope.del = function ($index) {

                if($index>=0){

                    if(confirm("是否删除"+$scope.texts[$index].name) ){

                        $scope.texts.splice($index,1);

                    }

                }

            };

            //定义一个全局变量idx,用于存储选中行的索引，方便执行保存操作。idx取值为0、1、、、、都有用，所以暂取值为-1;

            var idx = -1;

            //定义一个点击添加按钮时触发的事件，用于新增数据

            $scope.add = function(){

                //显示bootstrap中的模块窗口

                $('#modal-1').modal('show');

            };

            //定义一个点击保存按钮时触发的事件

            $scope.save = function(){

                //将添加的值赋给数组

                $scope.texts.name = $scope.newName;

                $scope.texts.age = $scope.newAge;

                $scope.texts.city = $scope.newCity;

                $scope.texts.push({name:$scope.newName,age:$scope.newAge,city:$scope.newCity});

                //关闭模块窗口

                $('#modal-1').modal('hide');

            };

            //定义一个点击修改按钮时出发的事件，用于修改数据

            $scope.update = function($index){

                //显示bootstrap中的模块窗口

                $('#modal-2').modal('show');

                //将选中行的数据绑定到临时对象prod中，在下面的模态窗口中展示出来

                $scope.prod.name = $scope.texts[$index].name;

                $scope.prod.age = $scope.texts[$index].age;

                $scope.prod.city = $scope.texts[$index].city;

                //选中行的索引赋值给全局变量idx

                idx = $index;

            };

            //定义一个点击确定按钮时触发的事件,

            $scope.ensure = function () {

                //将修改后的值赋给数组

                $scope.texts[idx].name = $scope.prod.name;

                $scope.texts[idx].age = $scope.prod.age;

                $scope.texts[idx].city = $scope.prod.city;

                //关闭模块窗口

                $('#modal-2').modal('hide');

            };

        });

    </script>

  </body>

</html>

用AngularJS实现对表格的增删改查（仅限前端）的更多相关文章

  1. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  2. js实现表格的增删改查

    这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...

  3. 基于AT UI实现表格的增删改查遇到的坑

    基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChe ...

  4. jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  5. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

  6. Angularjs中表格的增删改查

    在一个管理系统中,不外乎都是增删改查.现在比如有个表格,我想修改当前行的数据,如下图所示 一点击修改的时候,当前页面我需要修改的数据,变成能修改的样式,点击保存能保存当前修改的数据,如下图所示 需要引 ...

  7. 快速开发平台WebBuilder中ExtJS表格的增删改查

    使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL. WebBuilder开源项目地址:http://www.putdb.com 自动生成的页面: <!DOCT ...

  8. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

  9. appendChild简单表格的增删改查

    ---恢复内容开始--- <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><hea ...

随机推荐

  1. js跳转页面的几种方式

    第一种: window.location.href="http://www.baidu.com"; 第二种: window.history.back(-1); 第三种: windo ...

  2. [编织消息框架][JAVA核心技术]动态代理介绍

    由于java是种强类型静态语言,在执行时无法动态生成代码,静态语言基本都有这特性 动态生成代码有几种好处,也是弱类型语言的优点 1.部份逻辑可以实现热更新 2.远程调用实现非常适合 3.能动态生成扩展 ...

  3. Winform应用程序实现通用遮罩层二

    之前先后发表过:<Winform应用程序实现通用遮罩层>.<Winform应用程序实现通用消息窗口>,这两款遮罩层其实都是基于弹出窗口的,今天为大家分享一个比较简单但界面相对友 ...

  4. ubuntu16.04编译安装php7.2

    1,下载解压 tar xf php-7.2.0.tar.gz cd php-7.2.0/ 2,安装必要的库 sudo apt-get install libxml2-devsudo apt-get i ...

  5. HTML与HTML5复习标签汇总

    按字母顺序排列 New : HTML5 中的新标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义锚. < ...

  6. keepalived（nat）+ftp+http

    一. 环境要求需要2台LVS和n(n>=2)台RS操作系统 负载均衡模式 VIP NVIPRHEL7.4 NAT 193.168.141.30 192.168.102.165 LVS1 LVS2 ...

  7. android利用adb安装应用程序出现“more than one device and emulator wait for device ”

    今天,写自动化脚本时,因在这之前进行了一下真机版本的更新,还没有从电脑上拔出,就又在adt打开了一个AVD. 于是,自由自在的就去写脚本了,企图在emulator上装一个APK,在cmd窗口下,利用: ...

  8. PyQt4 模拟记事本基本功能（保存，打开文件）

    完成功能: 1. 默认[保存]按钮enable 2. 修改文本的内容后,[enable] 3. 解决字符乱码问题:utf-8 4. 提示:如果修改了文件没有保存的时候,又尝试打开新的文件,给出相关的提 ...

  9. 【二分图】P3386洛谷模板

    题目背景 二分图 题目描述 给定一个二分图,结点个数分别为n,m,边数为e,求二分图最大匹配数 输入输出格式 输入格式: 第一行,n,m,e 第二至e+1行,每行两个正整数u,v,表示u,v有一条连边 ...

  10. 1、ABPZero系列教程之拼多多卖家工具 前言

    此系列文章围绕着拼多多卖家工具来介绍ABPZero的使用,内容包括手机登录.手机注册.拼团提醒.微信公众号绑定帐号.有拼团发送消息到微信公众号(只要关注过微信公众号并已绑定系统帐号). 学习此系列必备 ...