angularjs基本操作增删改查
2018-01-14 19:30
337 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table tr:nth-child(even){
background-color: #FFE4C4;
}
table tr:nth-child(odd){
background-color: deepskyblue;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtl",function($scope){
//初始数据
var date1 = new Date("2018-01-11 07:11:11");
var date2 = new Date("2018-01-11 12:00:00");
var date3 = new Date("2018-01-11 14:55:55");
$scope.goods = [{
name:"云南白药",
num:100,
address:"云南",
price:19.9,
date:date1
},{
name:"999感冒灵",
num:30,
address:"北京",
price:12.5,
date:date2
},{
name:"感康",
num:20,
address:"河北",
price:16.6,
date:date3
}];
$scope.updateIndex = 0;
//查询
$scope.serch = "";
//排序
$scope.orderByKey = "";
//总计
$scope.allPrice = 0;
$scope.getallPrice = function(){
var count = 0;
for(index in $scope.goods){
count += $scope.goods[index].price * $scope.goods[index].num;
}
$scope.allPrice = count;
}
//调用计算总价的函数
$scope.getallPrice();
//添加商品显示
$scope.ifAdd = false;
$scope.ifAddB = function(){
$scope.ifAdd = !$scope.ifAdd;
$("#Btn").val("添加");
}
//添加商品
$scope.newName = "";
$scope.newNum = "";
$scope.newAddress = "";
$scope.newPrice = "";
$scope.addGood = function(){
if($("#Btn").val() == "添加"){
var good = {
name:$scope.newName,
num:$scope.newNum,
address:$scope.newAddress,
price:$scope.newPrice,
date:new Date()
}
$scope.goods.push(good);
}else{
$scope.goods[$scope.updateIndex].name = $scope.newName;
$scope.goods[$scope.updateIndex].num = $scope.newNum;
$scope.goods[$scope.updateIndex].address = $scope.newAddress;
$scope.goods[$scope.updateIndex].price = $scope.newPrice;
}
$scope.ifAdd = false;
$scope.getallPrice();
}
//删除商品
$scope.removeGood = function($index){
$scope.goods.splice($index,1);
$scope.getallPrice();
}
$scope.AllChecked = function($index){
}
//修改商品
$scope.updateGood = function($index){
$scope.updateIndex = $index;
//显示添加的页面并改成修改
$scope.ifAdd = true;
$("#Btn").val("修改");
$scope.newName = $scope.goods[$index].name;
$scope.newNum = $scope.goods[$index].num;
$scope.newAddress = $scope.goods[$index].address;
$scope.newPrice = $scope.goods[$index].price;
}
//批量删除
$scope.checkGood = false;
$scope.removeGoods = function($index){
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtl">
<center>
<h2>1511k超市</h2>
<input type="text" ng-model="serch" placeholder="请输入搜索关键字" />
<select ng-model="orderByKey">
<option value="">--请选择--</option>
<option value="num">数量升序</option>
<option value="-num">数量降序</option>
<option value="price">价格升序</option>
<option value="-price">价格降序</option>
</select>
<input type="button" value="入库" ng-click="ifAddB();" />
<input type="button" value="批量删除" ng-click="removeGoods($index);" />
<br />
<br />
<table style="border: 1px solid red; text-align: center;">
<tr style="background-color: green;">
<td width="80px"><input type="checkbox" ng-click="AllChecked()" />全选</td>
<td width="40px">序号</td>
<td width="80px">名字</td>
<td width="110px" ng-click="orderByKey='num'">数量</td>
<td width="40px">地址</td>
<td width="40px" ng-click="orderByKey='price'">价格</td>
<td width="100px">小计</td>
<td width="200px">时间</td>
<td width="100px">操作</td>
</tr>
<tr ng-repeat="g in goods | orderBy:orderByKey | filter:{name:serch}">
<td><input type="checkbox" ng-model="checkGood" /></td>
<td>{{$index}}</td>
<td>{{g.name}}</td>
<td>
<input type="button" value="-" ng-click="g.num=g.num-1;getallPrice()" />
{{g.num}}
<input type="button" value="+" ng-click="g.num=g.num+1;getallPrice()" />
</td>
<td>{{g.address}}</td>
<td>{{g.price}}</td>
<td>{{g.price*g.num | number:2}}</td>
<td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><input type="button" value="修改" ng-click="updateGood($index);"/><input type="button" value="删除" ng-click="removeGood($index);"/></td>
</tr>
</table>
<h3 style="padding-left: 650px;">总计:<span>{{allPrice | number:2}}</span></h3>
<div ng-show="ifAdd">
名字：<input type="text" placeholder="请输入名字" ng-model="newName" /><br />
数量：<input type="number" placeholder="请输入数量" ng-model="newNum" /><br />
地址：<input type="text" placeholder="请输入地址" ng-model="newAddress" /><br />
价格：<input type="number" placeholder="请输入价格" ng-model="newPrice" /><br /><br />
<input type="button" value="添加" id="Btn" ng-click="addGood();"/>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table tr:nth-child(even){
background-color: #FFE4C4;
}
table tr:nth-child(odd){
background-color: deepskyblue;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtl",function($scope){
//初始数据
var date1 = new Date("2018-01-11 07:11:11");
var date2 = new Date("2018-01-11 12:00:00");
var date3 = new Date("2018-01-11 14:55:55");
$scope.goods = [{
name:"云南白药",
num:100,
address:"云南",
price:19.9,
date:date1
},{
name:"999感冒灵",
num:30,
address:"北京",
price:12.5,
date:date2
},{
name:"感康",
num:20,
address:"河北",
price:16.6,
date:date3
}];
$scope.updateIndex = 0;
//查询
$scope.serch = "";
//排序
$scope.orderByKey = "";
//总计
$scope.allPrice = 0;
$scope.getallPrice = function(){
var count = 0;
for(index in $scope.goods){
count += $scope.goods[index].price * $scope.goods[index].num;
}
$scope.allPrice = count;
}
//调用计算总价的函数
$scope.getallPrice();
//添加商品显示
$scope.ifAdd = false;
$scope.ifAddB = function(){
$scope.ifAdd = !$scope.ifAdd;
$("#Btn").val("添加");
}
//添加商品
$scope.newName = "";
$scope.newNum = "";
$scope.newAddress = "";
$scope.newPrice = "";
$scope.addGood = function(){
if($("#Btn").val() == "添加"){
var good = {
name:$scope.newName,
num:$scope.newNum,
address:$scope.newAddress,
price:$scope.newPrice,
date:new Date()
}
$scope.goods.push(good);
}else{
$scope.goods[$scope.updateIndex].name = $scope.newName;
$scope.goods[$scope.updateIndex].num = $scope.newNum;
$scope.goods[$scope.updateIndex].address = $scope.newAddress;
$scope.goods[$scope.updateIndex].price = $scope.newPrice;
}
$scope.ifAdd = false;
$scope.getallPrice();
}
//删除商品
$scope.removeGood = function($index){
$scope.goods.splice($index,1);
$scope.getallPrice();
}
$scope.AllChecked = function($index){
}
//修改商品
$scope.updateGood = function($index){
$scope.updateIndex = $index;
//显示添加的页面并改成修改
$scope.ifAdd = true;
$("#Btn").val("修改");
$scope.newName = $scope.goods[$index].name;
$scope.newNum = $scope.goods[$index].num;
$scope.newAddress = $scope.goods[$index].address;
$scope.newPrice = $scope.goods[$index].price;
}
//批量删除
$scope.checkGood = false;
$scope.removeGoods = function($index){
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtl">
<center>
<h2>1511k超市</h2>
<input type="text" ng-model="serch" placeholder="请输入搜索关键字" />
<select ng-model="orderByKey">
<option value="">--请选择--</option>
<option value="num">数量升序</option>
<option value="-num">数量降序</option>
<option value="price">价格升序</option>
<option value="-price">价格降序</option>
</select>
<input type="button" value="入库" ng-click="ifAddB();" />
<input type="button" value="批量删除" ng-click="removeGoods($index);" />
<br />
<br />
<table style="border: 1px solid red; text-align: center;">
<tr style="background-color: green;">
<td width="80px"><input type="checkbox" ng-click="AllChecked()" />全选</td>
<td width="40px">序号</td>
<td width="80px">名字</td>
<td width="110px" ng-click="orderByKey='num'">数量</td>
<td width="40px">地址</td>
<td width="40px" ng-click="orderByKey='price'">价格</td>
<td width="100px">小计</td>
<td width="200px">时间</td>
<td width="100px">操作</td>
</tr>
<tr ng-repeat="g in goods | orderBy:orderByKey | filter:{name:serch}">
<td><input type="checkbox" ng-model="checkGood" /></td>
<td>{{$index}}</td>
<td>{{g.name}}</td>
<td>
<input type="button" value="-" ng-click="g.num=g.num-1;getallPrice()" />
{{g.num}}
<input type="button" value="+" ng-click="g.num=g.num+1;getallPrice()" />
</td>
<td>{{g.address}}</td>
<td>{{g.price}}</td>
<td>{{g.price*g.num | number:2}}</td>
<td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><input type="button" value="修改" ng-click="updateGood($index);"/><input type="button" value="删除" ng-click="removeGood($index);"/></td>
</tr>
</table>
<h3 style="padding-left: 650px;">总计:<span>{{allPrice | number:2}}</span></h3>
<div ng-show="ifAdd">
名字：<input type="text" placeholder="请输入名字" ng-model="newName" /><br />
数量：<input type="number" placeholder="请输入数量" ng-model="newNum" /><br />
地址：<input type="text" placeholder="请输入地址" ng-model="newAddress" /><br />
价格：<input type="number" placeholder="请输入价格" ng-model="newPrice" /><br /><br />
<input type="button" value="添加" id="Btn" ng-click="addGood();"/>
</div>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 链表的基本操作的实现---- 增删改查
- Android通讯录数据库介绍与基本操作（增删改查）
- 数据库的基本操作——增删改查
- Hibernate基本增删改查操作
- mongodb php增删改查基本操作
- --->关于链表的增删改查的基本操作
- hbase 增删改查基本操作
- 单链表的增删改查基本操作
- mysql-数据基本操作（增删改查）
- SQL基本之增删查改操作
- AngularJS表格的增删改查和其他操作
- javaweb框架之Hibernate3.6.0增删查该基本操作与Junit测试类
- MongoDB 增删查改基本操作
- Java双链表增删改查基本操作
- python对mysql.connector的简单封装，读改增删基本操作
- django数据库基本操作增删改查
- JSP基本的增删改查操作--MySql(备忘)
- MySQL中对于索引的基本增删查改操作总结
- mongocxx基本增删改查操作
- 双链表的增删改查基本操作