angular增删改查3

最新推荐文章于 2023-08-28 16:43:34 发布

Android_ElitePerson

最新推荐文章于 2023-08-28 16:43:34 发布

阅读量192

点赞数

分类专栏：代码

本文链接：https://blog.csdn.net/Android_ElitePerson/article/details/80098673

版权

代码专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

<link rel="stylesheet" href="css/ionic.min.css" />

<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//给添加框设置默认不显示
$scope.divShow=false;
//点击显示添加框
$scope.addShow = function(){
$scope.divShow=true;
};
$scope.addname;
$scope.addprice;
$scope.addcount;
$scope.addcolor;
$scope.checkAll=false;
//设置数组
$scope.data=[];
//点击加入按钮将所输入的数据添加到表哥当中
$scope.addAll=function(){
if($scope.addname==null||$scope.addprice==undefined||$scope.addcount==undefined||$scope.addcolor==undefined){
alert("输入选项有不符合规范的");
$scope.divShow=true;
}else{
$scope.data.push({
nameS:$scope.addname,
priceS:$scope.addprice,
countS:$scope.addcount,
colorS:$scope.addcolor

});
$scope.addname=null;
$scope.addprice=null;
$scope.addcount=null;
$scope.addcolor=null;

$scope.divShow = false;
}

};
$scope.nameX=false;
//判断输入框不能为空
$scope.nameJ = function(){
if($scope.addname==null||$scope.addname==undefined){
$scope.nameX=true;
}else{
$scope.nameX=false;
}
};
//判断价钱只能是数组并且不能小于0
$scope.priceX=false;
$scope.priceJ = function(){
if($scope.addprice==undefined){
$scope.priceX=true;
}else{
$scope.priceX=false;
};
};
//判断数量
$scope.countX=false;
$scope.countJ = function(){
if($scope.addcount==undefined){
$scope.countX=true;
}else{
$scope.countX=false;
}
};
//判断颜色
$scope.colorX=false;
$scope.colorJ = function(){
if($scope.addcolor==undefined){
$scope.colorX=true;
}else{
$scope.colorX=false;
}
};
//删除按钮
$scope.deletDataByName = function(_id){
//得到_id在数据源中的索引号
//循环遍历得到每一个商品，用它的id和_id比较
for(var j=0;j<$scope.data.length;j++){
var g = $scope.data[j];//得到一个商品
if(g.nameS == _id){//此g就是要删除的，，删除之
$scope.data.splice(j,1);
break;
}
}
};
//设置修改div默认为隐藏
$scope.updateShow=false;
//点击修改按钮
$scope.updateDataById = function(_id){
//显示修改div
$scope.updateShow=true;

for(var i=0;i<$scope.data.length;i++){
if($scope.data[i].nameS==_id){//找到了要修改的商品信息
$scope.updateGood = $scope.data[i];//收集修改对象
break;
}
}
//将本来要修改的值显示在对应的修改输入框当中
$scope.updatename=$scope.updateGood.nameS;
$scope.updateprice=$scope.updateGood.priceS;
$scope.updatecount=$scope.updateGood.countS;
$scope.updatecolor=$scope.updateGood.colorS;

}
//点击修改完成按钮
$scope.subminUpdate=function(){
//隐藏修改div
$scope.updateShow=false;
//将修改输入框当中修改过的值从新覆盖要修改的值上面
$scope.updateGood.nameS=$scope.updatename;
$scope.updateGood.priceS=$scope.updateprice;
$scope.updateGood.countS=$scope.updatecount;
$scope.updateGood.colorS=$scope.updatecolor;

};
//批量删除
$scope.deleteMore = function(){
//获取所有选择的checkbox
var cks = $("input[type=checkbox]:checked");
//循环的到所有勾选上的复选框
for(var i=0;i<cks.length;i++){
var ck = cks[i];
var _name = ck.value;//得到要删除的商品的id
for(var j=0;j<$scope.data.length;j++){//到数据源中找到和当前id匹配的商品，删除之
if($scope.data[j].nameS == _name){
$scope.data.splice(j,1);
break;
}
}

}
}
//总价格
$scope.priceAll = function(){
var p =0;
for(var v=0;v<$scope.data.length;v++){
p+=$scope.data[v].priceS*$scope.data[v].countS;

}
return p;
};
//数量＋按钮点击数量加
$scope.jia=function(_name){
for(haha in $scope.data){
if(_name == $scope.data[haha].nameS){
$scope.data[haha].countS++;
}
}
};
//数量-按钮点击数量减
$scope.jian=function(_name){
for(haha in $scope.data){
if(_name ==$scope.data[haha].nameS){
$scope.data[haha].countS--;
}
}
};

});
</script>

<style type="text/css">
table{
text-align: center;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<center>
<body ng-app="myApp" ng-controller="myCtrl" >
查询<input type="text" ng-model="selectAll"/>    
排序<select ng-model="orderAll" >
<option value="" selected="selected">请选择</option>
<option value="nameS">名称正序</option>
<option value="-nameS">名称倒序</option>
<option value="priceS">价钱正序</option>
<option value="-priceS">价钱倒序</option>
<option value="countS">数量正序</option>
<option value="-countS">数量倒序</option>
<option value="colorS">颜色正序</option>
<option value="-colorS">颜色倒序</option>
</select>    
<input type="button" value="添加" ng-click="addShow();"/>    
<input type="button" value=" 批量删除" ng-click="deleteMore();"/><br /><br />
<div ng-show="divShow">
名称：<input type="text" ng-model="addname" ng-blur="nameJ();"/><span ng-show="nameX">名称不能为空！</span><br />
价钱：<input type="text" ng-model="addprice" ng-blur="priceJ();"/><span ng-show="priceX">价钱只能是数子并且不能小于0还不能为空!</span><br />
数量：<input type="text" ng-model="addcount" ng-blur="countJ();"/><span ng-show="countX">数量只能是数子并且不能小于0还不能为空</span><br />
颜色：<input type="text" ng-model="addcolor" ng-blur="colorJ();"/><span ng-show="colorX">颜色不能为空！</span><br />
<input type="button" value="加入" ng-click="addAll();"/><br />
</div><br /><br />
<table border="1px" cellpadding="0px" cellspacing="1px" bordercolor="red" width="800px">
<tr style="background-color: yellow;">
<td><input type="checkbox" ng-model="checkAll"/></td>
<td>序号</td>
<td>名称</td>
<td>价钱</td>
<td>数量</td>
<td>颜色</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in data | filter:selectAll | orderBy:orderAll" class="{{$index%2==0?'red':'blue'}}">
<td><input type="checkbox" ng-model="checkAll" value="{{d.nameS}}"/></td>
<td>{{$index+1}}</td>
<td>{{d.nameS}}</td>
<td>{{d.priceS}}</td>
<td><input type="button" value="+" ng-click="jia(d.nameS);"/>  {{d.countS}}  <input type="button" value="-" ng-click="jian(d.nameS);"</td>
<td>{{d.colorS}}</td>
<td>{{d.priceS*d.countS}}</td>
<td><input type="button" value="删除" ng-click="deletDataByName(d.nameS);"/> <input type="button" value="修改" ng-click="updateDataById(d.nameS);"/></td>
</tr>
<tr>
<td colspan="8" style="background-color: #FFB6C1;color: #FF0000;">总计：{{priceAll()}}</td>
</tr>

</table><br /><br />
<div ng-show="updateShow">
<input type="text" ng-model="updatename"/><br />
<input type="text" ng-model="updateprice"/><br />
<input type="text" ng-model="updatecount"/><br />
<input type="text" ng-model="updatecolor"/><br />
<input type="button" value="修改完成" ng-click="subminUpdate();"/>
</div>
</body>
</center>
</html>

Android_ElitePerson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular增删改查3

&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" /&gt; &lt;meta name="view
复制链接

扫一扫