angular JS 实现增删改查

最新推荐文章于 2022-07-15 10:37:12 发布
最新推荐文章于 2022-07-15 10:37:12 发布
阅读量4.6k 收藏
点赞数
分类专栏： angular JS 文章标签： angular JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guojing5721/article/details/50102281
版权
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #myDiv, #myDiv1 {
            display: none;
        }

        table tr:first-of-type {
            background: #808080;
        }
    </style>
    <script src="../javascript/jquery-1.8.0.min.js"></script>
    <script src="../javascript/angular.min.js"></script>
    <script src="../javascript/dps.js"></script>

</head>
<body ng-controller="myController">
    <p>
        <input type="button" value="Add" id="add" ng-click="add()"/>
    </p>
    <table width="100%" align="center">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>身份证号</th>
            <th>电话</th>
            <th>地址</th>
            <th>email</th>
            <th>QQ</th>
            <th></th>
            <th></th>
        </tr>
        <tr style="text-align:center;" ng-repeat="item in items">
            <td ng-bind="item.xingming"></td>
            <td ng-bind="item.sex"></td>
            <td ng-bind="item.birth"></td>
            <td ng-bind ="item.sfz"></tdng-bind>
            <td ng-bind="item.tel"></td>
            <td ng-bind="item.dizhi"></td>
            <td ng-bind="item.emial"></td>
            <td ng-bind="item.qq"></td>
            <td><input type="button" value="Edit" ng-click="edit($index)" /></td>
            <td><input type="button" value="Delete" ng-click="delete($index)" /></td>
        </tr>
    </table>
    <div id="myDiv">
        <form id="EditForm">
            <table width="100%" align="center">
                <tr><th>姓名</th><th>性别</th><th>生日</th></tr>
                <tr style="text-align:center;">
                    <td><input type="text" ng-model="item.xingming" /></td>
                    <td><input type="text" ng-model="item.sex" /></td>
                    <td><input type="text" ng-model="item.birth"/></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="button" value="submit" id="submit"  ng-click="submit()"/>
                        <input type="button" value="cancel" id="cancel" ng-click="cancel()" />
                    </td>
                </tr>
            </table>
        </form>
    </div>



    <div id="myDiv1">
        <form id="EditForm1">
            <table width="100%" align="center">
                <tr><th>姓名</th><th>性别</th><th>生日</th></tr>
                <tr style="text-align:center;">
                    <td><input type="text" id="name" /></td>
                    <td><input type="text" id="sex" /></td>
                    <td><input type="text" id="birth" /></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <input type="button" value="submit" id="submit1" ng-click="submit1()" />
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        $(function () {
            $("table tr:odd").css("background", "#eeeeee");
        });
        angular.module("myApp", [])
        .controller("myController", function ($http, $scope) {
            //数据呈现
            $http({
                method: 'get',
                url: '/Invoke.ashx',
                params: { m: "NLJMS.BusinessLayer$UserService$PageList", _parameters: $.toJSON([{ t: 16, d: "" }]) }
            }).success(function (msg) {
                $scope.items = msg.rows;
                var aa = 0;
                var bb = {};
                var arra = {};
                //更改
                $scope.edit = function (index) {
                    $("#myDiv").show();
                    $scope.item = msg.rows[index];
                    aa = index;//获取当前索引值
                    arra = $.extend(true, {},msg.rows);//实现数组的浅复制
                    bb = arra[index];//获取当前对象
                }
                $scope.submit = function () {
                    delete $scope.item.ui_user_org;
                    delete $scope.item.ui_user_role;
                    $http({
                        method: 'get',
                        url: '/Invoke.ashx',
                        params: { m: "NLJMS.BusinessLayer$UserService$Update", _parameters: $.toJSON([{ t: 90, m: "NLJMS.Models$ui_user", d: $scope.item }]) }
                    }).success(function () {
                        $("#myDiv").hide();
                    })
                }
                $scope.cancel = function () {
                    $("#myDiv").hide();

                    $scope.items[aa] = bb;
                  
                        //$http({
                        //    method: 'get',
                        //    url: '/Invoke.ashx',
                        //    params: { m: "NLJMS.BusinessLayer$UserService$PageList", _parameters: $.toJSON([{ t: 16, d: "" }]) }
                        //}).success(function (msg) {
                        //    $scope.items = msg.rows;
                        //})
                }
                //add
                $scope.add = function () {
                    $("#myDiv1").show();
                }
                $scope.submit1 = function () {
                    var json = {};
                    var name = $("#name").val();
                    var sex = $("#sex").val();
                    var birth = $("#birth").val();
                    json.sex = sex;
                    json.account = name;
                    json.password = name;
                    json.password1 = name;
                    json.xingming = name;
                    json.sfz = name;
                    json.tel = name;
                    json.email = name;
                    json.qq = name;
                    json.dizhi = name;


                    $http({
                        method: 'get',
                        url: '/Invoke.ashx',
                        params: { m: "NLJMS.BusinessLayer$UserService$Add", _parameters: $.toJSON([{ t: 90, m: "NLJMS.Models$ui_user", d: json }]) }
                    }).success(function () {
                        $("#myDiv1").hide();
                        $http({
                            method: 'get',
                            url: '/Invoke.ashx',
                            params: { m: "NLJMS.BusinessLayer$UserService$PageList", _parameters: $.toJSON([{ t: 16, d: "" }]) }
                        }).success(function (msg) {
                            $scope.items = msg.rows;
                        })
                    })
                }
                //delete
                $scope.delete = function (index) {
                    var id = msg.rows[index].id;
                    $http({
                        method: 'get',
                        url: '/Invoke.ashx',
                        params: { m: "NLJMS.BusinessLayer$UserService$DeleteList", _parameters: $.toJSON([{ t: 16, d: id }]) }
                    }).success(function () {
                        $http({
                            method: 'get',
                            url: '/Invoke.ashx',
                            params: { m: "NLJMS.BusinessLayer$UserService$PageList", _parameters: $.toJSON([{ t: 16, d: "" }]) }
                        }).success(function (msg) {
                            $scope.items = msg.rows;
                        })
                    })

                }

               
            })
        })
    </script>

</body>
</html>

Web攻城狮-前端
关注
专栏目录
angularjs 实现增删改查
01-28
angularjs 实现mysql数据库的增删改查demo 后台使用java
（angular）增 删 改 查
浅若清兮
03-25 497
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-s
angularJS简易增删改查
梵韵
03-30 656
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, u
angularJs实现学生信息的增删改查以及翻页
01-23
angularJs实现学生信息的增删改查以及翻页，界面优美，
angularjs的增删改查
changten的博客
11-19 340
angularjs自己定义一个数组 var app = angular.module("myApp", []);   app.controller("myCtrl", function($scope) {       $scope.user= [/*{               "id": 1,               "name": "张三1",              
AngularJS模块化开发--增删改查
12-13
3. `services.js`：可能包含一个或多个服务，用于封装与后端API的交互，实现数据的增删改查操作。 4. `directives.js`：可能包含自定义指令，用于扩展AngularJS的功能，例如验证输入或创建复杂的UI组件。 5. `...
基于ASP.NET core2.0 使用EF和WebAPI，Angular5框架的增删改查实例
12-15
.net core2.0 + Angular5 + WebAPI 实现增删改查的实例 执行压缩包里的query.sql创建数据库和表 需要的环境 1)VS2017 2).net core2.0 SDK 3)Node.js 9.0以上
angular 学习，增删改查
06-05
这个"angular 学习，增删改查"项目是基于AngularJS的实战应用，旨在教授如何在Web应用中实现数据的增、删、改、查基本操作，这对于任何Web开发者来说都是至关重要的技能。 在AngularJS中，数据绑定是其核心特性之一...
基于ssm框架与angular实现的增删改查业务
07-22
在实现增删改查业务时，Angular的双向数据绑定特性使得UI和模型数据保持同步，极大地提高了开发效率。 在描述中提到的“复选框删除”功能，是Angular中的一个常见应用场景。当用户勾选复选框时，我们可以监听复选框...
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
10-19
AngularJS是一个由谷歌支持的前端JavaScript框架，用于构建动态Web应用。它特别适用于单页面应用(SPA)开发，可以使用HTML作为模板语言，通过数据绑定和依赖注入，可以轻松实现页面的动态更新。本文档将详细介绍如何...
用AngularJS做的静态的增删改查
10-24
用AngularJS做的静态的增删改查，对于初学者很有帮助的！
angular增删改查
07-23
本项目采用了angular技术实现了简单的品牌列表页面的增删查改
表格的增删改查+批量删除+全选+排序
yin_chenglong的博客
04-20 494
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/angular.min.js" &gt;&
angular之增删改查
12-30 433
angular之增删改查 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset...
angular 增删改查
weixin_39599065的博客
12-18 389
var app = angular.module("myapp",[]);    app.controller("my",function($scope){     //隐藏框     $scope.add = false;     //模拟数据     $scope.user = [{     id:1,     yonghu:"曹操",     nianling:15,   
基于Angular的增删改查
江南烟浓雨的博客
07-15 1058
本项目基于AngularCLI14.01开发。使用了node.js中的jsonserver作为服务器，提供数据库的服务。使用了Angular官方的Material组件库，美化网页UI界面和提高交互体验。,已经利用GitHubPage进行部署，可以在商品信息管理系统(gausshj.github.io)上看到本项目运行效果。打开backend文件夹，然后在终端中输入命令通过本次Angular项目开发，使我学习了Angular项目开发的基本流程。...
AngularJs增删改查
L59_1的博客
12-18 701
AngularJs的增删改查,排序,全选全不选,批量删除<script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("myApp",[]); app.
angularJS/路由实现增删改查
weikai_的博客
10-22 558
html> html> head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } style>
Angular实现的增删改查
qq_38921377的博客
07-06 1899
Angular实现的增删改查
angular js写增删改查代码实现
最新发布
07-25
下面是使用AngularJS实现增删改查的示例代码： HTML模板： ```html 用户列表 姓名 年龄 操作 <td>{{user.name}} <td>{{user.age}} (user)">编辑 (user)">删除 添加/编辑用户 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值