<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../libs/angular.min.js"></script>
<script src="../libs/jquery-1.11.0.min.js"></script>
<style>
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.goods=[
{
"id":1,
"name":"小红",
"price":1600,
"product":"北京"
},
{
"id":2,
"name":"小黄",
"price":2600,
"product":"上海"
},
{
"id":1,
"name":"艳艳",
"price":3600,
"product":"北京"
}
]
//查询关键字
$scope.selectKey="";
//排序关键字
$scope.orderKey="";
//添加按钮绑定事件
$scope.addGood = function(){
var good={};
good.id = $scope.id;
good.name = $scope.name;
good.price = $scope.price;
good.product = $scope.product;
$scope.goods.push(good);
//隐藏添加区域
$scope.showAdd=false;
}
//显示表格
$scope.showTable=true;
//删除
$scope.del=function(gname){
//遍历数组
for(var i =0;i<$scope.goods.length;i++){
if($scope.goods[i].name==gname){
$scope.goods.splice(i,1);
break;
}
}
if($scope.goods.length==0){
$scope.showTable=false;
}
}
//批量删除
$scope.delAll=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);
}
}
}
//隐藏修改表
$scope.updateshow=false;
//给字段名
$scope.upname="";
$scope.upprice="";
$scope.upproduct = "";
//找相关信息
$scope.update=function(gname){
//显示修改表
$scope.updateshow=true;
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].name==gname){
updateGood=$scope.goods[i];
break;
}
}
//回显
$scope.upname=updateGood.name;
$scope.upprice=updateGood.price;
$scope.upproduct=updateGood.product;
}
//提交方法
$scope.updateGood=function(){
updateGood.name=$scope.upname;
updateGood.price=$scope.upprice;
updateGood.product=$scope.upproduct;
$scope.updateshow=false;
}
})
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询：<input type="text" placeholder="请输入关键字" ng-model="selectKey"/>
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价格正序</option>
<option value="-price">价格倒序</option>
</select>
<button ng-click="showAdd=!showAdd">入库/添加</button>
</div>
<br />
<div ng-show="showAdd">
用户ID:<input type="text" placeholder="请输入用户ID" ng-model="id"/><br />
商品名称:<input type="text" placeholder="请输入商品名称" ng-model="name"/><br />
商品价格:<input type="text" placeholder="请输入商品价格" ng-model="price"/><br />
产地:<input type="text" placeholder="请输入产地" ng-model="product"/><br />
<input type="button" value="添加" ng-click="addGood()"/>
</div>
<table ng-show="showTable" border="1px">
<caption><h1>购物页面</h1></caption>
<tr>
<th colspan="7">
<button ng-click="delAll()">批量删除</button>
</th>
</tr>
<tr bgcolor="#AAAC90">
<th><input type="checkbox"ng-model="checkAll"/></th>
<th>编号</th>
<th>ID</th>
<th>商品名称</th>
<th>商品价格</th>
<th>产地</th>
<th>操作</th>
</tr>
<tr ng-repeat="g in goods | filter:selectKey |orderBy:orderKey" class="{{$index%2?'yellow':'red'}}">
<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>
<button ng-click="del(g.name)">删除</button>
<button ng-click="update(g.name)">修改</button>
</td>
</tr>
</table>
<br />
<div ng-show="updateshow">
商品名称：<input type="text" ng-model="upname"/><br />
商品价格：<input type="text" ng-model="upprice"/><br />
产地：<input type="text" ng-model="upproduct"/><br />
<button ng-click="updateGood()">确定</button>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="../libs/angular.min.js"></script>
<script src="../libs/jquery-1.11.0.min.js"></script>
<style>
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.goods=[
{
"id":1,
"name":"小红",
"price":1600,
"product":"北京"
},
{
"id":2,
"name":"小黄",
"price":2600,
"product":"上海"
},
{
"id":1,
"name":"艳艳",
"price":3600,
"product":"北京"
}
]
//查询关键字
$scope.selectKey="";
//排序关键字
$scope.orderKey="";
//添加按钮绑定事件
$scope.addGood = function(){
var good={};
good.id = $scope.id;
good.name = $scope.name;
good.price = $scope.price;
good.product = $scope.product;
$scope.goods.push(good);
//隐藏添加区域
$scope.showAdd=false;
}
//显示表格
$scope.showTable=true;
//删除
$scope.del=function(gname){
//遍历数组
for(var i =0;i<$scope.goods.length;i++){
if($scope.goods[i].name==gname){
$scope.goods.splice(i,1);
break;
}
}
if($scope.goods.length==0){
$scope.showTable=false;
}
}
//批量删除
$scope.delAll=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);
}
}
}
//隐藏修改表
$scope.updateshow=false;
//给字段名
$scope.upname="";
$scope.upprice="";
$scope.upproduct = "";
//找相关信息
$scope.update=function(gname){
//显示修改表
$scope.updateshow=true;
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].name==gname){
updateGood=$scope.goods[i];
break;
}
}
//回显
$scope.upname=updateGood.name;
$scope.upprice=updateGood.price;
$scope.upproduct=updateGood.product;
}
//提交方法
$scope.updateGood=function(){
updateGood.name=$scope.upname;
updateGood.price=$scope.upprice;
updateGood.product=$scope.upproduct;
$scope.updateshow=false;
}
})
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询：<input type="text" placeholder="请输入关键字" ng-model="selectKey"/>
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价格正序</option>
<option value="-price">价格倒序</option>
</select>
<button ng-click="showAdd=!showAdd">入库/添加</button>
</div>
<br />
<div ng-show="showAdd">
用户ID:<input type="text" placeholder="请输入用户ID" ng-model="id"/><br />
商品名称:<input type="text" placeholder="请输入商品名称" ng-model="name"/><br />
商品价格:<input type="text" placeholder="请输入商品价格" ng-model="price"/><br />
产地:<input type="text" placeholder="请输入产地" ng-model="product"/><br />
<input type="button" value="添加" ng-click="addGood()"/>
</div>
<table ng-show="showTable" border="1px">
<caption><h1>购物页面</h1></caption>
<tr>
<th colspan="7">
<button ng-click="delAll()">批量删除</button>
</th>
</tr>
<tr bgcolor="#AAAC90">
<th><input type="checkbox"ng-model="checkAll"/></th>
<th>编号</th>
<th>ID</th>
<th>商品名称</th>
<th>商品价格</th>
<th>产地</th>
<th>操作</th>
</tr>
<tr ng-repeat="g in goods | filter:selectKey |orderBy:orderKey" class="{{$index%2?'yellow':'red'}}">
<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>
<button ng-click="del(g.name)">删除</button>
<button ng-click="update(g.name)">修改</button>
</td>
</tr>
</table>
<br />
<div ng-show="updateshow">
商品名称：<input type="text" ng-model="upname"/><br />
商品价格：<input type="text" ng-model="upprice"/><br />
产地：<input type="text" ng-model="upproduct"/><br />
<button ng-click="updateGood()">确定</button>
</div>
</center>
</body>
</html>
2428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
