angularjs的增删改查
2020-03-05 14:48
996 查看
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app = angular.module("app",[])
app.controller("myctrl",function($scope){
$scope.datas = [{
id: 1001,
name: "iphone7",
price: 6888,
num: 1,
state: false
},
{
id: 1002,
name: "iphone8",
price: 7888,
num: 1,
state: false
}, {
id: 1003,
name: "iphoneX",
price: 8888,
num: 1,
state: false
}
];
$scope.numjia = function(index){
$scope.datas[index].num++;
}
$scope.numjian = function(index){
if($scope.datas[index].num>1){
$scope.datas[index].num--
}else{
alert("不可以小于一");
}
}
$scope.remove = function(index){
$scope.datas.splice(index,1)
}
$scope.zongnum = function(){
var a = 0 ;
for(var i = 0; i<$scope.datas.length;i++){
a = a+$scope.datas[i].num;
}
return a;
}
$scope.zongprice = function(){
var a = 0;
for(var i = 0; i < $scope.datas.length;i++){
a = a+($scope.datas[i].price*$scope.datas[i].num);
}
return a;
}
$scope.add = function(){
var a = false;
var b = false;
var c = false;
var d = false;
if($scope.id==""||$scope.id==null){
alert("id不可为空");
a = false;
}else if(isNaN($scope.id)){
alert("id是数字");
a = false;
}else{
a = true;
}
if($scope.Idname==""||$scope.Idname==null){
alert("name不可为空");
b = false;
}else{
b = true;
}
if($scope.price==""||$scope.price==null){
alert("price不可为空");
c = false;
}else if(isNaN($scope.price)){
alert("price是数字");
c = false;
}else{
c = true;
}
if($scope.num==""||$scope.num==null){
alert("num不可为空");
d = false;
}else if(isNaN($scope.num)){
alert("num是数字");
d = false;
}else{
d = true;
}
if(a&b&c&d){
$scope.datas.push({
id:$scope.id,
name:$scope.Idname,
price:$scope.price,
num:$scope.num,
state:false
})
}
}
$scope.updatashow = false;
$scope.up = function(arr){
if(window.confirm("你确定要修改吗")){
$scope.updatashow = true;
$scope.updataid = arr.id;
$scope.updataname = arr.name;
$scope.updataprice = arr.price;
$scope.updatanum = arr.num;
}
}
$scope.updata = function(){
var a = false;
var b = false;
var c = false;
if($scope.updataname==null||$scope.updataname==""){
alert("用户名不可为空")
a = false;
}else{
a = true;
}
if($scope.updataprice==null||$scope.updataprice==""){
alert("price不可为空")
b = false;
}else if(isNaN($scope.updataprice)){
alert("price是数字")
b = false;
}else{
b = true;
}
if($scope.updatanum==null||$scope.updatanum==""){
alert("num不可为空")
c = false;
}else if(isNaN($scope.updatanum)){
alert("num是数字")
c = false;
}else{
c = true;
}
if(a&b&c){
for(index in $scope.datas){
if(parseInt($scope.updataid)==$scope.datas[index].id){
$scope.datas[index].name = $scope.updataname;
$scope.datas[index].num = $scope.updatanum;
$scope.datas[index].price = $scope.updataprice;
$scope.updatashow = false;
}
}
}
}
$scope.sel = false;
$scope.selarr = function(){
if($scope.sel){
for(index in $scope.datas){
$scope.datas[index].state = true;
}
}else{
for(index in $scope.datas){
$scope.datas[index].state = false;
}
}
}
$scope.delSelect = function(){
var arr = [];
for(index in $scope.datas){
if($scope.datas[index].state){
arr.push($scope.datas[index].name);
}
}
if(arr.length<=0){
alert("请选择")
}else{
if(window.confirm("确定删除吗？")){
for(index in arr){
for(index2 in $scope.datas){
if(arr[index]==$scope.datas[index2].name){
$scope.datas.splice(index2,1);
}
}
}
}
}
}
})
</script>
<style>
.ccc tr:nth-child(even){
background: #ccc;
}
</style>
<body ng-controller="myctrl">
<div style="text-align: center;">
<input type="text" ng-model="cx" placeholder="请输入查询商品"/>
数量排序:<select ng-model="selOrder">
<option value="num">数量正序</option>
<option value="-num">数量倒叙</option>
</select>
<button ng-click="delSelect()">批量删除 </button>
</div>
<table border="1px" cellpadding="0" cellspacing="0" align="center" class="ccc">
<tr align="center">
<td width="20px">
<input type="checkbox" ng-model="sel" ng-click="selarr()"/>
</td>
<td width="70px">商品编号</td>
<td width="70px">商品名称</td>
<td width="300px">商品数量</td>
<td width="70px">商品单价</td>
<td width="70px">商品总价</td>
<td width="100px">商品操作</td>
</tr>
<tr ng-repeat="arr in datas | filter:{name:cx} | orderBy:selOrder ">
<td><input type="checkbox" ng-model="arr.state" /></td>
<td>{{arr.id}}</td>
<td>{{arr.name}}</td>
<td>
<button ng-click="numjian($index)">-</button>
<input type="text" ng-model="arr.num" />
<button ng-click="numjia($index)">+</button>
</td>
<td>{{arr.price}}</td>
<td>{{arr.num*arr.price}}</td>
<td>
<button ng-click="remove($index)">删除</button>
<button ng-click="up(arr)">修改</button>
</td>
</tr>
</table>
<div style="text-align: center;">
<h2>
<span style="margin: 30px;">总金额{{zongprice()}}</span>
<span style="margin: 30px;">总数量{{zongnum()}}</span>
</h2>
</div>
<table align="center" border="1px" cellpadding="0" cellspacing="0">
<h3 align="center">添加商品</h3>
<tr>
<td>商品编号</td>
<td><input type="text" ng-model="id"></td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" ng-model="Idname"></td>
</tr>
<tr>
<td>商品数量</td>
<td><input type="text" ng-model="num"></td>
</tr>
<tr>
<td>商品单价</td>
<td><input type="text" ng-model="price"></td>
</tr>
<tr align="center">
<td colspan="2">
<button ng-click="add()">添加</button>
</td>
</tr>
</table>
<table align="center" ng-show="updatashow">
<h3 align="center" ng-show="updatashow">修改商品</h3>
<tr>
<td>商品编号</td>
<td><input type="text" ng-model="updataid" disabled="disabled"/></td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" ng-model="updataname"/></td>
</tr>
<tr>
<td>商品数量</td>
<td><input type="text" ng-model="updatanum"/></td>
</tr>
<tr>
<td>商品单价</td>
<td><input type="text" ng-model="updataprice"/></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="updata()">修改</button></td>
</tr>
</table>
</body>
</html>
qq_40908860
发布了2 篇原创文章 · 获赞 0 · 访问量 241
私信
关注
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app = angular.module("app",[])
app.controller("myctrl",function($scope){
$scope.datas = [{
id: 1001,
name: "iphone7",
price: 6888,
num: 1,
state: false
},
{
id: 1002,
name: "iphone8",
price: 7888,
num: 1,
state: false
}, {
id: 1003,
name: "iphoneX",
price: 8888,
num: 1,
state: false
}
];
$scope.numjia = function(index){
$scope.datas[index].num++;
}
$scope.numjian = function(index){
if($scope.datas[index].num>1){
$scope.datas[index].num--
}else{
alert("不可以小于一");
}
}
$scope.remove = function(index){
$scope.datas.splice(index,1)
}
$scope.zongnum = function(){
var a = 0 ;
for(var i = 0; i<$scope.datas.length;i++){
a = a+$scope.datas[i].num;
}
return a;
}
$scope.zongprice = function(){
var a = 0;
for(var i = 0; i < $scope.datas.length;i++){
a = a+($scope.datas[i].price*$scope.datas[i].num);
}
return a;
}
$scope.add = function(){
var a = false;
var b = false;
var c = false;
var d = false;
if($scope.id==""||$scope.id==null){
alert("id不可为空");
a = false;
}else if(isNaN($scope.id)){
alert("id是数字");
a = false;
}else{
a = true;
}
if($scope.Idname==""||$scope.Idname==null){
alert("name不可为空");
b = false;
}else{
b = true;
}
if($scope.price==""||$scope.price==null){
alert("price不可为空");
c = false;
}else if(isNaN($scope.price)){
alert("price是数字");
c = false;
}else{
c = true;
}
if($scope.num==""||$scope.num==null){
alert("num不可为空");
d = false;
}else if(isNaN($scope.num)){
alert("num是数字");
d = false;
}else{
d = true;
}
if(a&b&c&d){
$scope.datas.push({
id:$scope.id,
name:$scope.Idname,
price:$scope.price,
num:$scope.num,
state:false
})
}
}
$scope.updatashow = false;
$scope.up = function(arr){
if(window.confirm("你确定要修改吗")){
$scope.updatashow = true;
$scope.updataid = arr.id;
$scope.updataname = arr.name;
$scope.updataprice = arr.price;
$scope.updatanum = arr.num;
}
}
$scope.updata = function(){
var a = false;
var b = false;
var c = false;
if($scope.updataname==null||$scope.updataname==""){
alert("用户名不可为空")
a = false;
}else{
a = true;
}
if($scope.updataprice==null||$scope.updataprice==""){
alert("price不可为空")
b = false;
}else if(isNaN($scope.updataprice)){
alert("price是数字")
b = false;
}else{
b = true;
}
if($scope.updatanum==null||$scope.updatanum==""){
alert("num不可为空")
c = false;
}else if(isNaN($scope.updatanum)){
alert("num是数字")
c = false;
}else{
c = true;
}
if(a&b&c){
for(index in $scope.datas){
if(parseInt($scope.updataid)==$scope.datas[index].id){
$scope.datas[index].name = $scope.updataname;
$scope.datas[index].num = $scope.updatanum;
$scope.datas[index].price = $scope.updataprice;
$scope.updatashow = false;
}
}
}
}
$scope.sel = false;
$scope.selarr = function(){
if($scope.sel){
for(index in $scope.datas){
$scope.datas[index].state = true;
}
}else{
for(index in $scope.datas){
$scope.datas[index].state = false;
}
}
}
$scope.delSelect = function(){
var arr = [];
for(index in $scope.datas){
if($scope.datas[index].state){
arr.push($scope.datas[index].name);
}
}
if(arr.length<=0){
alert("请选择")
}else{
if(window.confirm("确定删除吗？")){
for(index in arr){
for(index2 in $scope.datas){
if(arr[index]==$scope.datas[index2].name){
$scope.datas.splice(index2,1);
}
}
}
}
}
}
})
</script>
<style>
.ccc tr:nth-child(even){
background: #ccc;
}
</style>
<body ng-controller="myctrl">
<div style="text-align: center;">
<input type="text" ng-model="cx" placeholder="请输入查询商品"/>
数量排序:<select ng-model="selOrder">
<option value="num">数量正序</option>
<option value="-num">数量倒叙</option>
</select>
<button ng-click="delSelect()">批量删除 </button>
</div>
<table border="1px" cellpadding="0" cellspacing="0" align="center" class="ccc">
<tr align="center">
<td width="20px">
<input type="checkbox" ng-model="sel" ng-click="selarr()"/>
</td>
<td width="70px">商品编号</td>
<td width="70px">商品名称</td>
<td width="300px">商品数量</td>
<td width="70px">商品单价</td>
<td width="70px">商品总价</td>
<td width="100px">商品操作</td>
</tr>
<tr ng-repeat="arr in datas | filter:{name:cx} | orderBy:selOrder ">
<td><input type="checkbox" ng-model="arr.state" /></td>
<td>{{arr.id}}</td>
<td>{{arr.name}}</td>
<td>
<button ng-click="numjian($index)">-</button>
<input type="text" ng-model="arr.num" />
<button ng-click="numjia($index)">+</button>
</td>
<td>{{arr.price}}</td>
<td>{{arr.num*arr.price}}</td>
<td>
<button ng-click="remove($index)">删除</button>
<button ng-click="up(arr)">修改</button>
</td>
</tr>
</table>
<div style="text-align: center;">
<h2>
<span style="margin: 30px;">总金额{{zongprice()}}</span>
<span style="margin: 30px;">总数量{{zongnum()}}</span>
</h2>
</div>
<table align="center" border="1px" cellpadding="0" cellspacing="0">
<h3 align="center">添加商品</h3>
<tr>
<td>商品编号</td>
<td><input type="text" ng-model="id"></td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" ng-model="Idname"></td>
</tr>
<tr>
<td>商品数量</td>
<td><input type="text" ng-model="num"></td>
</tr>
<tr>
<td>商品单价</td>
<td><input type="text" ng-model="price"></td>
</tr>
<tr align="center">
<td colspan="2">
<button ng-click="add()">添加</button>
</td>
</tr>
</table>
<table align="center" ng-show="updatashow">
<h3 align="center" ng-show="updatashow">修改商品</h3>
<tr>
<td>商品编号</td>
<td><input type="text" ng-model="updataid" disabled="disabled"/></td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" ng-model="updataname"/></td>
</tr>
<tr>
<td>商品数量</td>
<td><input type="text" ng-model="updatanum"/></td>
</tr>
<tr>
<td>商品单价</td>
<td><input type="text" ng-model="updataprice"/></td>
</tr>
<tr align="center">
<td colspan="2"><button ng-click="updata()">修改</button></td>
</tr>
</table>
</body>
</html>
- 点赞
- 收藏
- 分享
- 文章举报
qq_40908860
发布了2 篇原创文章 · 获赞 0 · 访问量 241
私信
关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 网页购物车增删改查小demo(AngularJS)
- angularjs的增删改查
- angularJs用户列表的增删改查
- angularjs 增删改查 年龄查询
- angularJS增删改查
- angularjs的基本增删改查
- AngularJs增删改查_路由器
- （angularjs） 最全 数据的增删改查（此代码存在BUG，跪求天神破解！）
- AngularJS（基本使用）动态添加表格数据（增删改查）
- Angularjs增删改查例子
- angularjs简单使用增删查
- AngularJS——购物车增删改查
- AngularJS实现表格的增删改查（仅限前端）
- AngularJS增删查改（D）
- AngularJs示例简单增删改查
- AngularJS实现的省市二级联动功能示例【可对选项实现增删】
- angularjs增删查,排序,发货
- asp.net mvc中用angularJs写的增删改查的demo。初学者，求指点。。
- AngularJS中如何使用$http对MongoLab数据表进行增删改查
- angularJs实现增删改查示例3-新增界面