网页数据库的增删该查

最新推荐文章于 2021-06-19 12:06:02 发布
最新推荐文章于 2021-06-19 12:06:02 发布
阅读量135 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bawei11/article/details/79455920
版权

//在 js文件夹 里添加 angular.min 的包

<!DOCTYPE html>

<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.css1{
background-color: red;
}
.css2{

background-color: blue;
}
</style>
</head>
<body ng-controller="Democtrl">

<div>
<input type="text" placeholder="请输入查询的商品" ng-model="search"/>
数量排序:
<select ng-model="numsBy">
<option value="numss">数量正序</option>
<option value="-numss">数量倒序</option>
</select>
<button ng-click="deleteAll()">批量删除</button>
</div>

<table border="2">
<tr>
<td><input type="checkbox" ng-click="selectAll()"/></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>

<tr ng-repeat="x in Product | filter:{name:search} | orderBy:numsBy" class="{{$even ? 'css1':'css2'}}">
<td><input type="checkbox" ng-model="x.state"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="jian($index)">-</button>  
<input type="number" ng-model="x.numss">      
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.price*x.numss}}</td>
<td>
<button ng-click="remove($index)">删除</button>
</td>
<td>
<button ng-click="xiugai($index)">修改</button>
</td>
</tr>
</table>

<div>
<span>总价</span>
<span>{{totalPrices()}}</span>
<span>数量</span>
<span>{{numAll()}}</span>
<button ng-click="removeAll()">清空</button>
</div>

<form style="border: 1px solid yellow; width: 260px;">
商品编号:<input type="text" ng-model="ID"/><br />
商品名称:<input type="text" ng-model="IDname"/><br />
商品数量:<input type="number" ng-model="IDnum"/><br />
商品单价:<input type="text" ng-model="IDprice"/><br />
<button ng-click="add333()">添加</button>
</form>

<form style="border: solid black; width: 300px;" ng-show="updateShow">
商品编号:<input type="text" ng-model="updateId"/><br />
商品名称:<input type="text" ng-model="updateName"/><br />
商品数量:<input type="num" ng-model="updateNum"/><br />
商品编号:<input type="text" ng-model="updatePrice"/><br />
<button type="button" value="提交" ng-click="updateSub()">提交</button>
</form>

<script src="../js/angular.min.js"></script>

<script>
var App = angular.module("App",[]);
App.controller("Democtrl",function($scope){

//给Product定义数据
$scope.Product = [{
                id: 1000,
                name: "iPhone8",
                numss: 1,
                price: 8888,
                state:false
            }, {
                id: 1001,
                name: "iPhone9",
                numss: 1,
                price: 9888,
                state:false


            }, {
                id: 1002,
                name: "iPhone 2s",
                numss: 1,
                price: 3888,
                state:false
            }, {
                id: 1003,
                name: "iPhone 7P+",
                numss: 1,
                price: 10088,
                state:false
            }];
            
            //减减的操作  $index angularjs自带的索引    0
            $scope.jian = function(index){
            //0
            if($scope.Product[index].numss>=1){
            $scope.Product[index].numss--;
            }else{
            //做删除
            }           
            }
            
            
            //数量进行加加
            $scope.add = function(index){
            $scope.Product[index].numss++;
            }
            
            
            //删除
            $scope.remove = function(index){
            //0   1  index删除哪一个对像的索引             
            if(confirm("确定删除吗?")){
            $scope.Product.splice(index,1);
            }           
            }
            
            
            //算总价   每一个对像的购买数量*单价相加
            $scope.totalPrices = function(){            
            var totalPrices =0;           
            for (var x=0;x<$scope.Product.length;x++) {
            //0      1 *8888   8888
            totalPrices+=$scope.Product[x].numss*$scope.Product[x].price;
            }           
            return totalPrices;
            }           
            //清空
            $scope.removeAll = function(){
            $scope.Product = [];
            }           
            //数量的总合           
            $scope.numAll = function(){
            var totalNum = 0;           
            for (var x =0;x<$scope.Product.length;x++) {
            totalNum+=$scope.Product[x].numss;
            }           
            return totalNum;           
            }
            
            /
            
            
            //批量删除的            
            $scope.deleteAll = function(){
            //默认空的数组
            var arr =[];
            //循环数组
            for (var x =0;x<$scope.Product.length;x++) {
            //如果状态是true的情况下，代表checkbox已经选中了
            if($scope.Product[x].state){           
            arr.push($scope.Product[x].name);
            }           
            }
           
            //如果说数给的长度为0，证明一个都没有选中
            if(arr.length<=0){
            confirm("请您选中之后再进行删除");
            }else{
            //说明数给的长度不为0，直接删除   ng-repeat ="x in 数组"
            for (index in arr) {
            for (index1 in $scope.Product) {           
            if(arr[index]==$scope.Product[index1].name){
            $scope.Product.splice(index1,1);
            }
            }
            }           
            }           
            }






            //进行添加的操作
            $scope.add333 = function(){
            //首先判断一下商品编号不能为空，商品编号要是数字类型           
            if($scope.ID=="" || $scope.ID==null){
            alert("商品编号不能为空")           
            return;
            }           
            if(isNaN($scope.ID)){
            alert("商品编号必须是数字")           
            return;
            }                       
            $scope.Product.push({
id:$scope.ID,
name: $scope.IDname,
numss: $scope.IDnum,
price: $scope.IDprice
});   
            };
            
            
            
            //修改的操作
            $scope.updateShow = false;
            var updateId="";
            var updateName ="";
            var updateNum ="";
            var updatePrice="";
           
            $scope.xiugai = function(index){
            if(confirm("确定要修改吗?")){
            $scope.updateShow = true;           
            $scope.updateId = $scope.Product[index].id;
            $scope.updateName = $scope.Product[index].name;
            $scope.updateNum = $scope.Product[index].numss;
            $scope.updatePrice = $scope.Product[index].price;           
            }
            }
                        
            //提交的按钮
            $scope.updateSub = function(){           
            /*if(){}*/           
            //进行id的判断，如果id相等的情况下，我就进行删除的操作           
      for (index in $scope.Product) {
      if($scope.updateId==$scope.Product[index].id){    //如果相等的情况下，进行数据的修改     
      $scope.Product[index].name=$scope.updateName;   
      $scope.Product[index].numss=$scope.updateNum;     
      $scope.Product[index].price=$scope.updatePrice;           
      $scope.updateShow = false;       
            }
      }                       
            }
 
 
 
});
</script>
</body>
</html>
默语至于心乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angular增删改查
chuncui11的博客
05-30 962
实现要求：(1)CSS+HTML实现如图所示布局(2)商品内容显示要隔行变色(3)输入商品名称、价格、数量、发货地址后点击“添加”按钮后新增商品信息展示在列表中。要求商品名称（非空校验），商品价格必须大于0，商品数量必须大于0，发货地址要求做出二级联动效果（默认为河南-郑州）。若输入数据都符合要求则提示添加成功，然后在列表中展示，否则提示哪条信息输入有误。新增的商品具备以下功能要求。(4)库存商品...
老师写的购物车 同下
ch5211314的博客
03-01 246
.css1{                 background-color: red;             }                          .css2{                                  background-color: blue;             }
（angular）增 删 改 查
浅若清兮
03-25 486
&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
angular 增删改查
weixin_39599065的博客
12-18 356
var app = angular.module("myapp",[]);    app.controller("my",function($scope){     //隐藏框     $scope.add = false;     //模拟数据     $scope.user = [{     id:1,     yonghu:"曹操",     nianling:15,   
JSP网页连接数据库增删改查模板
07-03
**JSP网页连接数据库增删改查模板** 这个模板是一个基于Java Server Pages（JSP）技术的Web应用程序，主要用于演示如何通过网页实现对数据库中的数据进行添加、删除、修改和查询操作。它包括了一个预配置的数据库...
使用php实现数据库增删改查
02-25
使用 PHP 实现数据库增删改查 本文将详细介绍使用 PHP 实现数据库增删改查的方法，并结合实际代码示例，讲解数据库连接、增删改查操作的步骤和实现细节。 数据库连接 在使用 PHP 实现数据库增删改查之前，需要先...
过滤器（排序）+添加+查询+修改+批量删除
Ason_haiyu的博客
01-10 483
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> table { width: 600px; } var app = angular.module("gaomx", []); app.
angular 的简单小应用增删查改
XiaoZhuang__的博客
12-14 512
1.完成页面布局，如图所示。 2.    声明数据对象，初始化订单信息，数据自拟且不低于四条 3.    用ng-repaet指令将对象遍历并渲染到页面中。 4.    使用AngularJS过滤器实现搜索功能。在订单搜索框中，输入商品名称可以动态按商品名称进行查询列表信息；在输入框中输入用户手机号即可根据用户手机动态查询出符合要求的信息。 5.    用户可以根据订单状态过滤订单信息，订
Angular实现的增删改查
qq_38921377的博客
07-06 1882
Angular实现的增删改查
用AngularJS做的静态的增删改查
10-24
用AngularJS做的静态的增删改查，对于初学者很有帮助的！
Angular实现下拉框模糊查询功能示例
10-18
主要介绍了Angular实现下拉框模糊查询功能,涉及AngularJS事件响应及字符串查询等相关操作技巧,需要的朋友可以参考下
angularJs实现学生信息的增删改查以及翻页
01-23
angularJs实现学生信息的增删改查以及翻页，界面优美，
综合java题
weixin_30685029的博客
12-20 111
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; box-sizing: bor...
angularjs 表格的增删改查
dreamflylb的博客
10-22 998
html> html> head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; }
html_angular 增删改查+验证 ++
暴风雨的博客
01-09 300
大工程增删改查 var app = angular.module("anan", []); app.controller("enen", function($scope) { $scope.user = [{ ck:false, id: 1, name: '李1', pwd: 123456, level: 3
angular框架的成绩管理（增删改查）
被无情调岗的痛苦狗头
06-19 979
1.应用简介 ​ 应用为基于angular框架的简易“学生成绩管理平台”，对学生成绩数据进行增、删、改、查等操作。内容包含根组件、学生组件、成绩详情组件、不及格组件、消息组件、学生查询组件。 ​ 组件间建立路由进行交互，组件只负责信息的展示，信息的获取与更改由服务进行，通过不同组件间注入相同的服务实现组件间的数据共享，且将数据的显示与操作进行分离后，降低组件间的耦合性，使得后期应用修改更新更加便捷。 2.开发过程 2.1服务说明 ​ student.service.t.........
AngularJS 模糊查询的基本使用
mayn666的博客
12-08 1159
查询： {{datas|mohu:cx}} //创建模块 var mo = angular.module("myApp", []); mo.controller("myCtrl", function($scope) { //创建数组 $scope.datas = ["lisi", "zhangsan", "wangwu", "zhaoliu", "laoqi"];
购物车，，模糊查询+排序+删除
blgktlp的博客
11-17 424
效果图                                                      var app = angular.module("myApp", []);             app.controller("myCtrl", function($scope) {                 $scope.products
使用JSP实现数据库增删改查操作详解
"这篇资源是关于如何仅使用JSP实现对数据库的增删改查操作的教程，适合初学者参考。教程中通过创建一个名为student的数据库表，并在MyEclipse环境中建立一个Web项目，逐步讲解了如何编写JSP文件进行数据操作。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值