<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$http.get("json/bb.json").then(function(res) {
$scope.bb = res.data;
})
$scope.chaxun = "";
$scope.paixu = "";
$scope.addGood = function(){
var goodi = {}
goodi.name=$scope.name;
goodi.price=$scope.price;
goodi.nums=$scope.nums;
goodi.product=$scope.product;
$scope.bb.push(goodi);
}
$scope.Alldelete = function(){
if($scope.checkAll){
$scope.bb = [];
}else{
var ches = $("input[type=checkbox]:checked");
for (var i = ches.length-1;i>=0;i--) {
$scope.bb.splice(ches[i],value,1);
}
}
}
$scope.deleteMore = function(gname){
for (var i = 0; i < $scope.bb.length; i++) {
$scope.bb.splice(i,1);
break;
}
}
});
</script>
<style>
.red{
background-color: aqua;
}
.yellow{
background-color: antiquewhite;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询:<input type="text" placeholder="请输入要查询的关键字" ng-model="chaxun" /> 排序:
<select ng-model="paixu">
<option value="name">姓名正序</option>
<option value="-name">姓名倒序</option>
<option value="price">价钱正序</option>
<option value="-price">价钱倒序</option>
</select><br />
<input type="button" value="入库/增加" ng-click="showAdd=!showAdd" />
</div>
<div ng-show="showAdd">
名称：<input type="text" ng-model="name"/><br /> 价钱：
<input type="text" ng-model="price" /><br /> 数量：
<input type="text" ng-model="nums" /><br /> 产地：
<input type="text" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addGood();" />
</div>
<input type="button" value="批量删除" ng-click="Alldelete();"/>
<table border="1">
<tr style="background-color: #DCDCDC;">
<td><input type="checkbox" ng-model="checkAll" /></td>
<td>商品名称</td>
<td>价钱</td>
<td>数量</td>
<td>产地</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in bb | filter:chaxun | orderBy:paixu" class="{{$index%2? 'yellow':'red'}}">
<td><input type="checkbox" ng-model="checkAll" /></td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.nums}}</td>
<td>{{g.product}}</td>
<td>
<input type="button" value="删除" ng-click="deleteMore(gname);" />
</td>
</tr>
</table>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$http.get("json/bb.json").then(function(res) {
$scope.bb = res.data;
})
$scope.chaxun = "";
$scope.paixu = "";
$scope.addGood = function(){
var goodi = {}
goodi.name=$scope.name;
goodi.price=$scope.price;
goodi.nums=$scope.nums;
goodi.product=$scope.product;
$scope.bb.push(goodi);
}
$scope.Alldelete = function(){
if($scope.checkAll){
$scope.bb = [];
}else{
var ches = $("input[type=checkbox]:checked");
for (var i = ches.length-1;i>=0;i--) {
$scope.bb.splice(ches[i],value,1);
}
}
}
$scope.deleteMore = function(gname){
for (var i = 0; i < $scope.bb.length; i++) {
$scope.bb.splice(i,1);
break;
}
}
});
</script>
<style>
.red{
background-color: aqua;
}
.yellow{
background-color: antiquewhite;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询:<input type="text" placeholder="请输入要查询的关键字" ng-model="chaxun" /> 排序:
<select ng-model="paixu">
<option value="name">姓名正序</option>
<option value="-name">姓名倒序</option>
<option value="price">价钱正序</option>
<option value="-price">价钱倒序</option>
</select><br />
<input type="button" value="入库/增加" ng-click="showAdd=!showAdd" />
</div>
<div ng-show="showAdd">
名称：<input type="text" ng-model="name"/><br /> 价钱：
<input type="text" ng-model="price" /><br /> 数量：
<input type="text" ng-model="nums" /><br /> 产地：
<input type="text" ng-model="product" /><br />
<input type="button" value="添加" ng-click="addGood();" />
</div>
<input type="button" value="批量删除" ng-click="Alldelete();"/>
<table border="1">
<tr style="background-color: #DCDCDC;">
<td><input type="checkbox" ng-model="checkAll" /></td>
<td>商品名称</td>
<td>价钱</td>
<td>数量</td>
<td>产地</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in bb | filter:chaxun | orderBy:paixu" class="{{$index%2? 'yellow':'red'}}">
<td><input type="checkbox" ng-model="checkAll" /></td>
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>{{g.nums}}</td>
<td>{{g.product}}</td>
<td>
<input type="button" value="删除" ng-click="deleteMore(gname);" />
</td>
</tr>
</table>
</center>
</body>
</html>
扫一扫
2185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
