Angular增删查改

最新推荐文章于 2021-06-19 12:06:02 发布
最新推荐文章于 2021-06-19 12:06:02 发布
阅读量406 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ChEng225/article/details/78045164
本文介绍了一个使用AngularJS框架实现的简单表格增删改查功能示例。该示例利用了AngularJS的双向数据绑定特性，并结合Bootstrap模态框进行数据的编辑和添加。通过这个示例，读者可以学习如何在实际项目中应用AngularJS来快速搭建具备基本CRUD功能的Web应用程序。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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" rel="external nofollow">
    <link rel="stylesheet" href="css/font-awesome.css" rel="external nofollow" type="text/css"></link>
    <link rel="stylesheet" href="css/ui.css" rel="external nofollow" type="text/css"></link>
    <link rel="stylesheet" href="css/form.css" rel="external nofollow" type="text/css"></link>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.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>
                <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>
ChEng225
关注
库房--库存信息增加导出Excel表格功能
罗俊
06-28 1645
前言： 遇到问题： 分析问题： 我的分析过程是： 1. 需要在Web界面上增加导出Excel表格的按钮。 2. Views页面上应当怎样的布局和增加相应的代码？ 3. JS页面上应当在那个位置增加那些方法？ 4. Controllers界面上有需要怎样的控制？ 3. IBLL层中增加通往BLL层的数据。 4. BLL层中增加调取数据库中信息的内容。 5. IDAL层中增加通往DAL层的数据。 ...
[供应链] 库存盘点
最新发布
Hudas的博客
10-15 626
本文主要讲解供应链领域中的库存盘点相关的知识点
AngularJs增删改查例子
大强博客
04-01 1012
1、JSapp.controller("sysUserCtrl", function($scope, $modal, $filter, $http, $window, datadService, localization, toaster, Upload, $timeout) { // 后端服务IP地址和端口 var serverIpPort = $window.localStorage["se...
angular之增删改查
12-30 452
angular之增删改查 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset...
网络版库存管理系统如何共享库存信息
weixin_34336526的博客
04-08 1868
库存的信息共享对企业的协同工作是起到很大的作用的，传统的EXCEL库存信息只能是一个人在电脑上编辑，或能通过放到网上邻居上进行共享，这种方面都达不到真正的库存信息共享的目的，不够灵活，现在计算机软件的发达，兴起了很多相关的信息管理软件，如库存管理系统就是专门用来管理库存信息的，除了可以单机管理使用，还可以达到多人共享库存信息的目的。网络版库存管理系统是通过数据库的技术进行共享的，比如在一台服务器上...
angular+bootstrap 列表增删查改
09-22
总的来说，"angular+bootstrap 列表增删查改"项目提供了一个高效、实用的前端解决方案，适合初学者学习Angular和Bootstrap，也适用于开发者快速搭建列表管理功能。通过理解和实践这个项目，开发者可以深入理解前端...
jpsJavaWep增删查改.zip
05-02
标题 "jpsJavaWep增删查改.zip" 暗示了这是一个关于使用Java Web进行CRUD操作的项目或教程。"jps"可能是Java进程服务（Java Process Service）的缩写，它通常用于查看Java应用程序的运行状态。在这个上下文中，它...
Angular实现品牌列表增删查改操作
在项目“angular增删查改”中，实现了一个品牌列表页面的增删查改功能，即创建(Create)、读取(Read)、更新(Update)和删除(Delete)数据的功能。这是Web应用中常见的操作，下面详细介绍实现这些功能所需了解的知识点。...
简易版的商品列表展示及增删查改
06-10
在IT行业中，尤其是在Web开发领域，商品列表展示及增删查改是常见的功能需求，尤其对于电商系统来说至关重要。这个“简易版的商品列表展示及增删查改”项目旨在提供一个基础的示例，帮助初学者理解如何实现这些基本...
Angular6+Bootstrap实现增删查改应用及后端API集成
Angular的前端界面负责收集用户输入和展示数据，而后端的jsonserver提供API接口，Angular通过HTTP请求与之交互，完成对数据的增删查改操作。 ### jsonserver jsonserver是一个用Node.js编写的简单但功能强大的JSON ...
Angular实现的增删改查
qq_38921377的博客
07-06 1945
Angular实现的增删改查
angular框架的成绩管理（增删改查）
被无情调岗的痛苦狗头
06-19 1109
1.应用简介 ​ 应用为基于angular框架的简易“学生成绩管理平台”，对学生成绩数据进行增、删、改、查等操作。内容包含根组件、学生组件、成绩详情组件、不及格组件、消息组件、学生查询组件。 ​ 组件间建立路由进行交互，组件只负责信息的展示，信息的获取与更改由服务进行，通过不同组件间注入相同的服务实现组件间的数据共享，且将数据的显示与操作进行分离后，降低组件间的耦合性，使得后期应用修改更新更加便捷。 2.开发过程 2.1服务说明 ​ student.service.t.........
AngularJS（基本使用）动态添加表格数据（增删改查）
mayn666的博客
12-08 7150
水果： 水果名称 操作 {{g.name}} var mb = angular.module("myApp",[]);//创建模板 mb.controller("myCtrl",function($scope){//创建控制 //定义数组 $scope.goods=[]; //添加的方法 $scope
Angular2+ iframe跨域调用父页面js
weixin_30418341的博客
03-19 500
业务场景：列表页面添加一个导入功能,该导入功能由第三方页面提供，导入完成后需要通知主列表刷新数据。 先来看看iframe跨域调用父页面的实现逻辑(以postMessage方式为例) (postMessage介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage) 1.父页面html <!D...
Angular完整项目开发11 - 增、删、改、查（CRUD）
小鹰信息技术服务部
04-20 1723
经过前面的一些折腾，Angular前端系统的基础工作差不多了，现在轮到应用的核心内容之一：增、删、改、查。 以设备模块（device)为例。
库存数据库表的设计
似水流年
08-14 1万+
方案1 入库表 ---记录每一次入库信息。 出库表 ---记录每一次出库信息。 库存表 ---所有操作都是INSERT操作，没有UPDATE操作，入库时数量为正数、出库时数量为负数。 库存视图---汇总库存表的信息，按用户需要的格式显示。 历史库存表---由于库存表中的信息越来越多所以每隔一段时间把库存为零的产品删掉，同时INSERT到历史库存表里。 这样记录库存，每一个入库或出库操作
Angularjs增删改查例子
weixin_40321535的博客
12-16 617
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <script type="text/javascript"
SAP中MM模块采购数据报表（入库，订单）
热门推荐
charliefromkansas的博客
02-19 1万+
在生产机上，做了一个报表 从SAP的数据库的多种透明表中取数据，放到内表中，加以整理，用普通屏幕和选择屏幕的方式，用ALV表格加以显示。 一、需求描述 统计所有物料在这一个月中（1日至30日） 物料入库信息-----已经入库的数目、金额、商业价格1*数目得到的预计金额，实际入库金额 采购订单信息----已经形成PO但是尚未入库的订单信息 将上述信息按照物料的DISPO（MRP控制者）进
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值