<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--http://blog.csdn.net/nvzizhou/article/details/46360607,自动适应屏幕
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title>月考综合题</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.goods = [{
"id": 1,
"name": "小米5",
"price": 1600,
"product": "北京"
},
{
"id": 2,
"name": "华为p10",
"price": 4200,
"product": "东莞"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"product": "佛山"
}
];
//查询关键字
$scope.seacherKey = "";
//排序关键字
$scope.orderKey = "";
//显示添加模块，，默认不显示
$scope.showAdd = false;
//控制table是否显示的属性
$scope.showTable = true;
//添加商品
$scope.addGood = function() {
var good = {};
good.name = $scope.name;
good.price = $scope.price;
good.product = $scope.product;
$scope.goods.push(good)
$scope.showAdd = false;
$scope.showTable = true;
}
//删除商品
$scope.deleteGood = function(gname) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) {
// i-->删除哪一个对象 1--->代表删除1涂条数据;
$scope.goods.splice(i, 1);
break;
}
}
if($scope.goods.length == 0) {
$scope.showTable = false; //隐藏表头
}
}
//是否显示修改框区域
$scope.showUpdate = false;
$scope.upIndex = "";
//定义接收修改信息的字段
$scope.upname = "";
$scope.upprice = "";
$scope.upproduct = "";
var updateGood = ""; //要修改的商品信息
//先显示要修改的商品
$scope.showGood = function(gname) {
$scope.showUpdate = true;
//拿到修改的商品
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) {
updateGood = $scope.goods[i];
break;
}
}
//把要修改的商品信息,放入修改框,输入框中使用的是$upname
$scope.upname = updateGood.name;
$scope.upprice = updateGood.price;
$scope.upproduct = updateGood.product;
}
$scope.updateGood = function() {
//updateGood引用指向json的某个对象,修改json数据;页面刷新
updateGood.name = $scope.upname;
updateGood.price = $scope.upprice
updateGood.product = $scope.upproduct;
$scope.showUpdate = false;
}
//全选复选框的绑定字段
$scope.checkAll = false;
//批量删除
$scope.deleteMore = function() {
if($scope.checkAll) {
$scope.goods = [];
} else { //不是全部删除
var checked = $("input[type=checkbox]:checked");
for(var i = checked.length-1; i >=0; i--) {
$scope.goods.splice(checked[i].value, 1);
}
}
}
});
</script>
<style>
.blue{
background-color: aliceblue;
}
.purple{
background-color: paleturquoise;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
查询:<input type="text" placeholder="请输入查询关键字" ng-model="searchKey" />
排序:
<select ng-model="orderKey">
<option value="">请选择</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价钱正序</option>
<option value="-price">价钱倒序</option>
</select><br /><br />
<!--??是否显示添加区域的开关，，，showAdd=!showAdd 表示 逆操作-->
<input type="button" value="入库/增加" ng-click="showAdd=!showAdd" />
<div ng-show="showAdd">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="name" /><br /> 商品价钱：
<input type="number" placeholder="请输入商品价钱" ng-model="price" /><br /> 商品产地：
<input type="text" placeholder="请输入商品产地" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addGood();" />
</div>
<hr />
<input type="button" value="批量删除" ng-click="deleteMore();" />
<!--cellspacing 属性规定单元格之间的空间。-->
<table ng-show="showTable" border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
<tr style="background-color: grey;">
<!--<th> 标签定义 HTML 表格中的表头单元格。checkAll是个全选功能-->
<th><input type="checkbox" ng-model="checkAll" /></th>
<th>序号</th>
<th>id</th>
<th>商品名称</th>
<th>价钱</th>
<!--????-->
<th ng-click="orderKey='product'">产地</th>
<th style="width: 110px;">操作</th>
</tr>
<!--默认数据
下一行注释的部分：只对 name进行过滤查询-->
<!--<tr ng-repeat="g in goods | filter:{name:seacherKey} " class="{{$index%2? 'yellow':'red'}}" >-->
<tr ng-repeat="g in goods | filter:searchKey | orderBy:orderKey" class="{{$index%2?'blue':'purple'}}">
<td> <input type="checkbox" value="{{$index}}" ng-model="checkAll" /></td>
<td>{{$index}}</td>
<td> {{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.product}}</td>
<td>
<input type="button" value="删除" ng-click="deleteGood(g.name);" />
<input type="button" value="修改" ng-click="showGood(g.name);" />
</td>
</tr>
</table>
<br />
<div ng-show="showUpdate">
商品名称:<input type="text" ng-model="upname" /><br /> 商品价钱：
<input type="number" ng-model="upprice" /><br /> 商品产地：
<input type="text" ng-model="upproduct" /><br /><br />
<input type="button" value="提交修改" ng-click="updateGood();" />
</div>
</div>
<p> {{goods}}</p>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<!--http://blog.csdn.net/nvzizhou/article/details/46360607,自动适应屏幕
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title>月考综合题</title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.goods = [{
"id": 1,
"name": "小米5",
"price": 1600,
"product": "北京"
},
{
"id": 2,
"name": "华为p10",
"price": 4200,
"product": "东莞"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"product": "佛山"
}
];
//查询关键字
$scope.seacherKey = "";
//排序关键字
$scope.orderKey = "";
//显示添加模块，，默认不显示
$scope.showAdd = false;
//控制table是否显示的属性
$scope.showTable = true;
//添加商品
$scope.addGood = function() {
var good = {};
good.name = $scope.name;
good.price = $scope.price;
good.product = $scope.product;
$scope.goods.push(good)
$scope.showAdd = false;
$scope.showTable = true;
}
//删除商品
$scope.deleteGood = function(gname) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) {
// i-->删除哪一个对象 1--->代表删除1涂条数据;
$scope.goods.splice(i, 1);
break;
}
}
if($scope.goods.length == 0) {
$scope.showTable = false; //隐藏表头
}
}
//是否显示修改框区域
$scope.showUpdate = false;
$scope.upIndex = "";
//定义接收修改信息的字段
$scope.upname = "";
$scope.upprice = "";
$scope.upproduct = "";
var updateGood = ""; //要修改的商品信息
//先显示要修改的商品
$scope.showGood = function(gname) {
$scope.showUpdate = true;
//拿到修改的商品
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) {
updateGood = $scope.goods[i];
break;
}
}
//把要修改的商品信息,放入修改框,输入框中使用的是$upname
$scope.upname = updateGood.name;
$scope.upprice = updateGood.price;
$scope.upproduct = updateGood.product;
}
$scope.updateGood = function() {
//updateGood引用指向json的某个对象,修改json数据;页面刷新
updateGood.name = $scope.upname;
updateGood.price = $scope.upprice
updateGood.product = $scope.upproduct;
$scope.showUpdate = false;
}
//全选复选框的绑定字段
$scope.checkAll = false;
//批量删除
$scope.deleteMore = function() {
if($scope.checkAll) {
$scope.goods = [];
} else { //不是全部删除
var checked = $("input[type=checkbox]:checked");
for(var i = checked.length-1; i >=0; i--) {
$scope.goods.splice(checked[i].value, 1);
}
}
}
});
</script>
<style>
.blue{
background-color: aliceblue;
}
.purple{
background-color: paleturquoise;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
查询:<input type="text" placeholder="请输入查询关键字" ng-model="searchKey" />
排序:
<select ng-model="orderKey">
<option value="">请选择</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价钱正序</option>
<option value="-price">价钱倒序</option>
</select><br /><br />
<!--??是否显示添加区域的开关，，，showAdd=!showAdd 表示 逆操作-->
<input type="button" value="入库/增加" ng-click="showAdd=!showAdd" />
<div ng-show="showAdd">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="name" /><br /> 商品价钱：
<input type="number" placeholder="请输入商品价钱" ng-model="price" /><br /> 商品产地：
<input type="text" placeholder="请输入商品产地" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addGood();" />
</div>
<hr />
<input type="button" value="批量删除" ng-click="deleteMore();" />
<!--cellspacing 属性规定单元格之间的空间。-->
<table ng-show="showTable" border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
<tr style="background-color: grey;">
<!--<th> 标签定义 HTML 表格中的表头单元格。checkAll是个全选功能-->
<th><input type="checkbox" ng-model="checkAll" /></th>
<th>序号</th>
<th>id</th>
<th>商品名称</th>
<th>价钱</th>
<!--????-->
<th ng-click="orderKey='product'">产地</th>
<th style="width: 110px;">操作</th>
</tr>
<!--默认数据
下一行注释的部分：只对 name进行过滤查询-->
<!--<tr ng-repeat="g in goods | filter:{name:seacherKey} " class="{{$index%2? 'yellow':'red'}}" >-->
<tr ng-repeat="g in goods | filter:searchKey | orderBy:orderKey" class="{{$index%2?'blue':'purple'}}">
<td> <input type="checkbox" value="{{$index}}" ng-model="checkAll" /></td>
<td>{{$index}}</td>
<td> {{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.product}}</td>
<td>
<input type="button" value="删除" ng-click="deleteGood(g.name);" />
<input type="button" value="修改" ng-click="showGood(g.name);" />
</td>
</tr>
</table>
<br />
<div ng-show="showUpdate">
商品名称:<input type="text" ng-model="upname" /><br /> 商品价钱：
<input type="number" ng-model="upprice" /><br /> 商品产地：
<input type="text" ng-model="upproduct" /><br /><br />
<input type="button" value="提交修改" ng-click="updateGood();" />
</div>
</div>
<p> {{goods}}</p>
</body>
</html>