<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="libs/angular.min.js" ></script>
<script type="text/javascript" src="libs/jquery-1.11.0.min.js" ></script>
<style>
td,
th {
width: 80px;
text-align: center;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
<script>
var app = angular.module("myApp", []);
app.controller("mCtrl", function($scope,$http) {
$http.get("aa.json").then(function(response){
$scope.goods_json = response.data;
})
/*$scope.goods_json = [{
"id": 1,
"name": "小米5",
"price": 1600,
"product": "北京"
},
{
"id": 2,
"name": "华为p10",
"price": 4200,
"product": "东莞"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"product": "佛山"
}
];*/
$scope.searchKey = "";
$scope.orderKey = "";
$scope.updateShow = false;
//是否显示修改回显区域
$scope.upIndex = "";
//定义接收修改信息的字段
$scope.upname = "";
$scope.upprice = "";
$scope.upproduct = "";
var updateGood = ""; //要修改的商品信息
//查詢
//增加
$scope.addGoods = function() {
var goods = {};
goods.name = $scope.name;
goods.price = $scope.price;
goods.product = $scope.product;
$scope.goods_json.push(goods);
}
//刪除
$scope.deleteGoods = function(mname) {
for(var i = 0; i < $scope.goods_json.length; i++) {
if(mname == $scope.goods_json[i].name) {
$scope.goods_json.splice(i, 1);
break
}
}
};
//显示修改区域
$scope.showGoods = function(mname) {
$scope.updateShow = true;
for(var i = 0; i < $scope.goods_json.length; i++) {
if(mname == $scope.goods_json[i].name) {
updateGood = $scope.goods_json[i];
break;
//
}
}
$scope.upname = updateGood.name;
$scope.upprice =updateGood.price;
$scope.upproduct =updateGood.product;
};
//修改对象
$scope.updateGoods = function(){
//类似java里的两个引用指向同一个对象;
updateGood.name = $scope.upname;
updateGood.price = $scope.upprice;
updateGood.product = $scope.upproduct;
//让修改区域 隐藏
$scope.updateShow = false;
}
//批量删除
$scope.deleteMore = function(){
if ($scope.checkAll) {
$scope.goods_json =[];
} else{
var checked = $("input[type=checkbox]:checked")
for (var i = checked.length-1; i >=0; i--) {
$scope.goods_json.splice(checked[i].value,1);
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="mCtrl">
<center>
查询:<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>
<input type="button" value="入库/增加" ng-click="showAdd = !showAdd " />
<br />
<br />
<div ng-show="showAdd">
商品名称:<input type="text" ng-model="name" /><br /> 商品价格:
<input type="text" ng-model="price" /><br /> 商品产地:
<input type="text" ng-model="product" /><br />
<input type="button" ng-click="addGoods();" value="添加" />
</div>
<hr />
<input type="button" value="批量刪除" ng-click="deleteMore();" />
<table border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
<!--表頭-->
<tr bgcolor="gray">
<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_json | filter: searchKey | orderBy:orderKey" class="{{$index%2? 'red':'yellow'}}">
<td><input type="checkbox" ng-model="checkAll" value="{{$index}}"/></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="deleteGoods(g.name);" />
<input type="button" value="修改" ng-click="showGoods(g.name);" /></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 />
<input type="button" ng-click="updateGoods();" value="修改" />
</div><br />
<p> {{goods_json}}</p>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="libs/angular.min.js" ></script>
<script type="text/javascript" src="libs/jquery-1.11.0.min.js" ></script>
<style>
td,
th {
width: 80px;
text-align: center;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
<script>
var app = angular.module("myApp", []);
app.controller("mCtrl", function($scope,$http) {
$http.get("aa.json").then(function(response){
$scope.goods_json = response.data;
})
/*$scope.goods_json = [{
"id": 1,
"name": "小米5",
"price": 1600,
"product": "北京"
},
{
"id": 2,
"name": "华为p10",
"price": 4200,
"product": "东莞"
},
{
"id": 3,
"name": "vivox20",
"price": 2600,
"product": "佛山"
}
];*/
$scope.searchKey = "";
$scope.orderKey = "";
$scope.updateShow = false;
//是否显示修改回显区域
$scope.upIndex = "";
//定义接收修改信息的字段
$scope.upname = "";
$scope.upprice = "";
$scope.upproduct = "";
var updateGood = ""; //要修改的商品信息
//查詢
//增加
$scope.addGoods = function() {
var goods = {};
goods.name = $scope.name;
goods.price = $scope.price;
goods.product = $scope.product;
$scope.goods_json.push(goods);
}
//刪除
$scope.deleteGoods = function(mname) {
for(var i = 0; i < $scope.goods_json.length; i++) {
if(mname == $scope.goods_json[i].name) {
$scope.goods_json.splice(i, 1);
break
}
}
};
//显示修改区域
$scope.showGoods = function(mname) {
$scope.updateShow = true;
for(var i = 0; i < $scope.goods_json.length; i++) {
if(mname == $scope.goods_json[i].name) {
updateGood = $scope.goods_json[i];
break;
//
}
}
$scope.upname = updateGood.name;
$scope.upprice =updateGood.price;
$scope.upproduct =updateGood.product;
};
//修改对象
$scope.updateGoods = function(){
//类似java里的两个引用指向同一个对象;
updateGood.name = $scope.upname;
updateGood.price = $scope.upprice;
updateGood.product = $scope.upproduct;
//让修改区域 隐藏
$scope.updateShow = false;
}
//批量删除
$scope.deleteMore = function(){
if ($scope.checkAll) {
$scope.goods_json =[];
} else{
var checked = $("input[type=checkbox]:checked")
for (var i = checked.length-1; i >=0; i--) {
$scope.goods_json.splice(checked[i].value,1);
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="mCtrl">
<center>
查询:<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>
<input type="button" value="入库/增加" ng-click="showAdd = !showAdd " />
<br />
<br />
<div ng-show="showAdd">
商品名称:<input type="text" ng-model="name" /><br /> 商品价格:
<input type="text" ng-model="price" /><br /> 商品产地:
<input type="text" ng-model="product" /><br />
<input type="button" ng-click="addGoods();" value="添加" />
</div>
<hr />
<input type="button" value="批量刪除" ng-click="deleteMore();" />
<table border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
<!--表頭-->
<tr bgcolor="gray">
<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_json | filter: searchKey | orderBy:orderKey" class="{{$index%2? 'red':'yellow'}}">
<td><input type="checkbox" ng-model="checkAll" value="{{$index}}"/></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="deleteGoods(g.name);" />
<input type="button" value="修改" ng-click="showGoods(g.name);" /></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 />
<input type="button" ng-click="updateGoods();" value="修改" />
</div><br />
<p> {{goods_json}}</p>
</center>
</body>
</html>