<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>angularJS增删改查</title>
<style>
.tab tr:nth-child(even){
background-color: aqua;
}
.tab tr:nth-child(odd){
background-color: crimson;
}
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
/*定义全局的App*/
var app = angular.module("App", []);
/*$scope是angularJS中内置服务对象*/
app.controller("Democtrl", function($scope) {
/*定义一个数组里面包含三个对象的初始数据*/
$scope.show = [{
flay: false,
num: 1,
name: "手机",
count: 2,
money: 1000
}, {
flay: true,
num: 2,
name: "电脑",
count: 3,
money: 2000
}, {
flay: false,
num: 3,
name: "电视",
count: 3,
money: 500
}]
/*定义一个显示总价的方法*/
$scope.moneyAll = function() {
var qian = 0;
for(var i = 0; i < $scope.show.length; i++) {
qian += $scope.show[i].count * $scope.show[i].money;
}
return qian;
}
/*定义一个显示总数量的方法*/
$scope.countAll = function() {
var cou = 0;
for(var i = 0; i < $scope.show.length; i++) {
cou += $scope.show[i].count;
}
return cou;
}
/*定义删除的方法,移除商品,index表示调用此方法传进来的参数*/
$scope.remove = function(index) {
var xx = confirm("确认删除？");
if(xx) {
/*.splice(a,b) a代表从那个下标开始删除，b代表删除多少个元素*/
$scope.show.splice(index, 1);
}
}
/*定义清空数据的方法,移除所有商品*/
$scope.removeAll = function() {
if(confirm("确认删除？")) {
$scope.show = [];
}
}
/*定义一个数量减少的方法*/
$scope.jian = function(index) {
$scope.show[index].count = $scope.show[index].count - 1;
}
/*定义一个数量增加的方法*/
$scope.jia = function(index) {
$scope.show[index].count = $scope.show[index].count + 1;
}
/*定义一个添加商品的方法*/
$scope.addShow = function() {
/*.push()将一个对象数据,添加到数组的结尾*/
$scope.show.push({
flay:false,
num: $scope.id,
name: $scope.showName,
count: $scope.showNum,
money: $scope.showMoney
});
}
/*通过全局变量的概念,把修改回显方法的下标,传给确认修改方法里面*/
/*第一步*/
$scope.xb = 0;
/*定义一个变量,操控当前修改div是否显示，默认不显示*/
$scope.isShow = false;
/*定义修改的时候,显示div并实现数据的回显*/
$scope.change = function(index) {
/*第二步*/
$scope.xb = index;
$scope.isShow = true;
$scope.uId = $scope.show[index].num;
$scope.uName = $scope.show[index].name;
$scope.uNum = $scope.show[index].count;
$scope.uMoney = $scope.show[index].money;
}
/*数据回显后,点击修改,把数据修改并展示出来*/
$scope.updateShow = function() {
/*第三步*/
index = $scope.xb;
$scope.show[index].num = $scope.uId;
$scope.show[index].name = $scope.uName;
$scope.show[index].count = $scope.uNum;
$scope.show[index].money = $scope.uMoney;
}
/*点击复选框的时候,修改数组里面对象的参数值*/
$scope.changeChecked = function(index){
$scope.show[index].flay = !$scope.show[index].flay;
}
/*批量删除,复选框被选中的删除掉*/
$scope.removeCheked = function(){
/*运用全局变量的方式,判断flay的值,是否被选中*/
var isCheked = false;
for(var i = 0;i<$scope.show.length;i++){
if($scope.show[i].flay){
isCheked = true;
}
}
if(isCheked == true){
for(var i = 0;i<$scope.show.length;i++){
if($scope.show[i].flay){
$scope.show.splice(i,1);
}
}
}else{
alert("请选择要删除的对象");
}
}
});
</script>
</head>
<body ng-controller="Democtrl">
<input type="text" ng-model="selectName" placeholder="请输入关键字查询" />
<select ng-model="order">
<option value="count" selected="selected">数量递增</option>
<option value="-count">数量递减</option>
</select>
<button ng-click="removeAll()">清空购物车</button>
<button ng-click="removeCheked()">批量删除</button>
<!--创建一个表格展示数据-->
<table border="1" cellpadding="0" cellspacing="0" class="tab">
<tr align="center" style="background-color: #fff;">
<td><input type="checkbox" /></td>
<td>商品序号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品价格</td>
<td>小计</td>
<td>操作</td>
</tr>
<!--利用指令ng-repeat循环遍历数据-->
<tr ng-repeat="x in show | orderBy:order | filter:{name:selectName}" align="center">
<td><input type="checkbox" ng-checked="x.flay" ng-click="changeChecked($index)"/></td>
<!--{{}}与ng-bind作用是一样的，都能取到controller中定义的值-->
<td>{{x.num}}</td>
<td ng-bind="x.name"></td>
<td><button ng-click="jian($index)">-</button><input type="text" ng-model="x.count" /><button ng-click="jia($index)">+</button></td>
<td>{{x.money}}</td>
<td>{{x.count*x.money}}</td>
<!--$index内置服务，默认从0开始自增，配合ng-repeat使用。在remove方法中，代表的是一个参数-->
<td><button ng-click="remove($index)">移除</button> <button ng-click="change($index)">修改</button></td>
</tr>
</table>
<h3>商品总价：<span ng-bind="moneyAll()"></span></h3>
<h3>商品总数量：<span ng-bind="countAll()"></span></h3>
<div style="border: 1px solid coral;width: 300px;height: 150px;">
<table>
<tr>
<td>商品编号：</td>
<td><input type="text" ng-model="id" /></td>
</tr>
<tr>
<td>商品名称：</td>
<td><input type="text" ng-model="showName" /></td>
</tr>
<tr>
<td>商品数量：</td>
<td><input type="number" ng-model="showNum" /></td>
</tr>
<tr>
<td>商品单价：</td>
<td><input type="number" ng-model="showMoney" /></td>
</tr>
<tr>
<td colspan="2"><button ng-click="addShow()">添加<button></td>
</tr>
</table>
<br />
<div style="border: 1px solid coral;width: 300px;height: 150px;" ng-show="isShow">
<table>
<tr>
<td>商品编号：</td>
<td><input type="text" ng-model="uId"/></td>
</tr>
<tr>
<td>商品名称：</td>
<td><input type="text" ng-model="uName"/></td>
</tr>
<tr>
<td>商品数量：</td>
<td><input type="number" ng-model="uNum"/></td>
</tr>
<tr>
<td>商品单价：</td>
<td><input type="number" ng-model="uMoney"/></td>
</tr>
<tr>
<td colspan="2"><button ng-click="updateShow()">确认修改<button></td>
</tr>
</table>
</body>
</html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>angularJS增删改查</title>
<style>
.tab tr:nth-child(even){
background-color: aqua;
}
.tab tr:nth-child(odd){
background-color: crimson;
}
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
/*定义全局的App*/
var app = angular.module("App", []);
/*$scope是angularJS中内置服务对象*/
app.controller("Democtrl", function($scope) {
/*定义一个数组里面包含三个对象的初始数据*/
$scope.show = [{
flay: false,
num: 1,
name: "手机",
count: 2,
money: 1000
}, {
flay: true,
num: 2,
name: "电脑",
count: 3,
money: 2000
}, {
flay: false,
num: 3,
name: "电视",
count: 3,
money: 500
}]
/*定义一个显示总价的方法*/
$scope.moneyAll = function() {
var qian = 0;
for(var i = 0; i < $scope.show.length; i++) {
qian += $scope.show[i].count * $scope.show[i].money;
}
return qian;
}
/*定义一个显示总数量的方法*/
$scope.countAll = function() {
var cou = 0;
for(var i = 0; i < $scope.show.length; i++) {
cou += $scope.show[i].count;
}
return cou;
}
/*定义删除的方法,移除商品,index表示调用此方法传进来的参数*/
$scope.remove = function(index) {
var xx = confirm("确认删除？");
if(xx) {
/*.splice(a,b) a代表从那个下标开始删除，b代表删除多少个元素*/
$scope.show.splice(index, 1);
}
}
/*定义清空数据的方法,移除所有商品*/
$scope.removeAll = function() {
if(confirm("确认删除？")) {
$scope.show = [];
}
}
/*定义一个数量减少的方法*/
$scope.jian = function(index) {
$scope.show[index].count = $scope.show[index].count - 1;
}
/*定义一个数量增加的方法*/
$scope.jia = function(index) {
$scope.show[index].count = $scope.show[index].count + 1;
}
/*定义一个添加商品的方法*/
$scope.addShow = function() {
/*.push()将一个对象数据,添加到数组的结尾*/
$scope.show.push({
flay:false,
num: $scope.id,
name: $scope.showName,
count: $scope.showNum,
money: $scope.showMoney
});
}
/*通过全局变量的概念,把修改回显方法的下标,传给确认修改方法里面*/
/*第一步*/
$scope.xb = 0;
/*定义一个变量,操控当前修改div是否显示，默认不显示*/
$scope.isShow = false;
/*定义修改的时候,显示div并实现数据的回显*/
$scope.change = function(index) {
/*第二步*/
$scope.xb = index;
$scope.isShow = true;
$scope.uId = $scope.show[index].num;
$scope.uName = $scope.show[index].name;
$scope.uNum = $scope.show[index].count;
$scope.uMoney = $scope.show[index].money;
}
/*数据回显后,点击修改,把数据修改并展示出来*/
$scope.updateShow = function() {
/*第三步*/
index = $scope.xb;
$scope.show[index].num = $scope.uId;
$scope.show[index].name = $scope.uName;
$scope.show[index].count = $scope.uNum;
$scope.show[index].money = $scope.uMoney;
}
/*点击复选框的时候,修改数组里面对象的参数值*/
$scope.changeChecked = function(index){
$scope.show[index].flay = !$scope.show[index].flay;
}
/*批量删除,复选框被选中的删除掉*/
$scope.removeCheked = function(){
/*运用全局变量的方式,判断flay的值,是否被选中*/
var isCheked = false;
for(var i = 0;i<$scope.show.length;i++){
if($scope.show[i].flay){
isCheked = true;
}
}
if(isCheked == true){
for(var i = 0;i<$scope.show.length;i++){
if($scope.show[i].flay){
$scope.show.splice(i,1);
}
}
}else{
alert("请选择要删除的对象");
}
}
});
</script>
</head>
<body ng-controller="Democtrl">
<input type="text" ng-model="selectName" placeholder="请输入关键字查询" />
<select ng-model="order">
<option value="count" selected="selected">数量递增</option>
<option value="-count">数量递减</option>
</select>
<button ng-click="removeAll()">清空购物车</button>
<button ng-click="removeCheked()">批量删除</button>
<!--创建一个表格展示数据-->
<table border="1" cellpadding="0" cellspacing="0" class="tab">
<tr align="center" style="background-color: #fff;">
<td><input type="checkbox" /></td>
<td>商品序号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品价格</td>
<td>小计</td>
<td>操作</td>
</tr>
<!--利用指令ng-repeat循环遍历数据-->
<tr ng-repeat="x in show | orderBy:order | filter:{name:selectName}" align="center">
<td><input type="checkbox" ng-checked="x.flay" ng-click="changeChecked($index)"/></td>
<!--{{}}与ng-bind作用是一样的，都能取到controller中定义的值-->
<td>{{x.num}}</td>
<td ng-bind="x.name"></td>
<td><button ng-click="jian($index)">-</button><input type="text" ng-model="x.count" /><button ng-click="jia($index)">+</button></td>
<td>{{x.money}}</td>
<td>{{x.count*x.money}}</td>
<!--$index内置服务，默认从0开始自增，配合ng-repeat使用。在remove方法中，代表的是一个参数-->
<td><button ng-click="remove($index)">移除</button> <button ng-click="change($index)">修改</button></td>
</tr>
</table>
<h3>商品总价：<span ng-bind="moneyAll()"></span></h3>
<h3>商品总数量：<span ng-bind="countAll()"></span></h3>
<div style="border: 1px solid coral;width: 300px;height: 150px;">
<table>
<tr>
<td>商品编号：</td>
<td><input type="text" ng-model="id" /></td>
</tr>
<tr>
<td>商品名称：</td>
<td><input type="text" ng-model="showName" /></td>
</tr>
<tr>
<td>商品数量：</td>
<td><input type="number" ng-model="showNum" /></td>
</tr>
<tr>
<td>商品单价：</td>
<td><input type="number" ng-model="showMoney" /></td>
</tr>
<tr>
<td colspan="2"><button ng-click="addShow()">添加<button></td>
</tr>
</table>
<br />
<div style="border: 1px solid coral;width: 300px;height: 150px;" ng-show="isShow">
<table>
<tr>
<td>商品编号：</td>
<td><input type="text" ng-model="uId"/></td>
</tr>
<tr>
<td>商品名称：</td>
<td><input type="text" ng-model="uName"/></td>
</tr>
<tr>
<td>商品数量：</td>
<td><input type="number" ng-model="uNum"/></td>
</tr>
<tr>
<td>商品单价：</td>
<td><input type="number" ng-model="uMoney"/></td>
</tr>
<tr>
<td colspan="2"><button ng-click="updateShow()">确认修改<button></td>
</tr>
</table>
</body>
</html>