<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.color1{
background-color: red;
}
.color2{
background-color: green;
}
</style>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.id = 1;
//创建一个json对象
$scope.Goods = [
{id:$scope.id++,name:"小米 MIX 2",price:4699,gdate:"2017-09-11",product:"北京",check:false},
{id:$scope.id++,name:"iPhone X",price:8388,gdate:"2017-09-13",product:"Cupertino",check:false},
{id:$scope.id++,name:"华为Mate 10",price:4499,gdate:"2017-10-16",product:"深圳",check:false},
{id:$scope.id++,name:"坚果 Pro 2",price:3299,gdate:"2017-11-07",product:"北京",check:false},
{id:$scope.id++,name:"三星Note 8",price:7988,gdate:"2014-08-23",product:"城南市",check:false},
];
//赋初值
$scope.search = "";/*查询*/
$scope.orderCheck = "";/*排序*/
$scope.showAdd = false;/*添加div*/
$scope.checkAll = false;/*全选*/
$scope.showUpdate = false;/*修改div*/
$scope.showTable = true;/*展示的table*/
//创建要添加的字段
$scope.name = "";
$scope.price = "";
$scope.gdate = "";
$scope.product = "";
$scope.check = false;
//添加
$scope.add = function () {
//创建一个新的商品空对象
var newGood = {};
//给对象赋值
newGood.id = $scope.id++;
newGood.name = $scope.name;
newGood.price = $scope.price;
newGood.gdate = $scope.gdate;
newGood.product = $scope.product;
newGood.check = $scope.check;
//给新的商品添加到json中
$scope.Goods.push(newGood);
//将添加div隐藏
$scope.showAdd = false;
//展示table
$scope.showTable = true;
}
//删除
$scope.delete = function (id) {
//遍历json，根据id删除
for (var i = 0; i < $scope.Goods.length; i++) {
if ($scope.Goods[i].id == id) {
$scope.Goods.splice(i,1);
}
}
/*全部删除后隐藏table*/
if ($scope.Goods.length == 0) {
$scope.showTable = false;
}
}
//创建修改的字段
var updateGood = [];
$scope.updateName = "";
$scope.updatePrice = "";
$scope.updateGdate = "";
$scope.updateProduct = "";
//修改
$scope.update = function (id) {
/*展示修改div*/
$scope.showUpdate = true;
//根据索引获取指定对象
for (var i = 0; i < $scope.Goods.length; i++) {
//如果在原json中找到与id相同的对象
if ($scope.Goods[i].id == id) {
//把相同的对象存入到修改的json中
updateGood = $scope.Goods[i];
}
}
//回显
$scope.updateName = updateGood.name;
$scope.updatePrice = updateGood.price;
$scope.updateGdate = updateGood.gdate;
$scope.updateProduct = updateGood.product;
//给提交按钮绑定
$scope.submit = function () {
//修改索引指定的值
updateGood.name = $scope.updateName;
updateGood.price = $scope.updatePrice;
updateGood.gdate = $scope.updateGdate;
updateGood.product = $scope.updateProduct;
/*隐藏修改的div*/
$scope.showUpdate = false;/*修改div*/
}
}
//全选、全不选
$scope.checkAllFun = function () {
for (i in $scope.Goods) {
//将json中所有小的复选框的状态 = 总的复选框
$scope.Goods[i].check = $scope.checkAll;
}
}
//批量删除
$scope.delAll = function () {
//新建一个json串，用来储存所有被选中的对象
var newJson = [];
for (i in $scope.Goods) {
//如果json中的对象被选中了
if ($scope.Goods[i].check) {
//那么把它添加到新的json
newJson.push($scope.Goods[i]);
}
}
//遍历新的json
for (i1 in newJson) {
//遍历原来的json
for (i2 in $scope.Goods) {
//如果新的json中的对象与原来的json中的对象一样
if (newJson[i1] == $scope.Goods[i2]) {
//把一样的删除
$scope.Goods.splice(i2,1);
}
}
}
/*全部删除后隐藏table*/
if ($scope.Goods.length == 0) {
$scope.showTable = false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center><br />
<!--模糊查询+排序+添加按钮-->
查询：<input type="text" placeholder="请输入搜索关键字..." ng-model="search" />
排序：<select ng-model="orderCheck">
<option value="">--请选择--</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价格正序</option>
<option value="-price">价格倒序</option>
<option value="gdate">日期正序</option>
<option value="-gdate">日期倒序</option>
<option value="product">总部正序</option>
<option value="-product">总部倒序</option>
</select>
<input type="button" value="入库" ng-click="showAdd = !showAdd" />
<br /><br />
<!--添加的div-->
<div ng-show="showAdd">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="name" /><br />
商品价格：<input type="text" placeholder="请输入商品价格" ng-model="price" /><br />
发布时间：<input type="text" placeholder="请输入发布时间" ng-model="gdate" /><br />
公司总部：<input type="text" placeholder="请输入公司总部" ng-model="product" /><br /><br />
<input type="button" value="添加" ng-click="add()" />
</div>
<br />
<!--展示的table-->
<table border="1px" cellspacing="0" cellpadding="0" style="width: 45%;text-align: center;" ng-show="showTable">
<tr style="background-color: lightgray;">
<th><input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()" /></th>
<th>编号</th>
<th ng-click="orderCheck = 'name'">名称</th>
<th ng-click="orderCheck = 'price'">价格</th>
<th ng-click="orderCheck = 'gdate'">发布时间</th>
<th ng-click="orderCheck = 'product'">公司总部</th>
<th><input type="button" value="批量删除" ng-click="delAll()" /></th>
</tr>
<tr ng-repeat="x in Goods | filter:search | orderBy:orderCheck"
class="{{$index%2==0?'color1':'color2'}}">
<td><input type="checkbox" ng-model="x.check" /></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.gdate}}</td>
<td>{{x.product}}</td>
<td>
<input type="button" value="删除" ng-click="delete(x.id)"/>
<input type="button" value="修改" ng-click="update(x.id)" />
</td>
</tr>
</table><br />
<!--修改的div-->
<div ng-show="showUpdate">
商品名称：<input type="text" ng-model="updateName" /><br />
商品价格：<input type="text" ng-model="updatePrice" /><br />
发布时间：<input type="text" ng-model="updateGdate" /><br />
公司总部：<input type="text" ng-model="updateProduct" /><br /><br />
<input type="button" value="提交" ng-click="submit()" />
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.color1{
background-color: red;
}
.color2{
background-color: green;
}
</style>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.id = 1;
//创建一个json对象
$scope.Goods = [
{id:$scope.id++,name:"小米 MIX 2",price:4699,gdate:"2017-09-11",product:"北京",check:false},
{id:$scope.id++,name:"iPhone X",price:8388,gdate:"2017-09-13",product:"Cupertino",check:false},
{id:$scope.id++,name:"华为Mate 10",price:4499,gdate:"2017-10-16",product:"深圳",check:false},
{id:$scope.id++,name:"坚果 Pro 2",price:3299,gdate:"2017-11-07",product:"北京",check:false},
{id:$scope.id++,name:"三星Note 8",price:7988,gdate:"2014-08-23",product:"城南市",check:false},
];
//赋初值
$scope.search = "";/*查询*/
$scope.orderCheck = "";/*排序*/
$scope.showAdd = false;/*添加div*/
$scope.checkAll = false;/*全选*/
$scope.showUpdate = false;/*修改div*/
$scope.showTable = true;/*展示的table*/
//创建要添加的字段
$scope.name = "";
$scope.price = "";
$scope.gdate = "";
$scope.product = "";
$scope.check = false;
//添加
$scope.add = function () {
//创建一个新的商品空对象
var newGood = {};
//给对象赋值
newGood.id = $scope.id++;
newGood.name = $scope.name;
newGood.price = $scope.price;
newGood.gdate = $scope.gdate;
newGood.product = $scope.product;
newGood.check = $scope.check;
//给新的商品添加到json中
$scope.Goods.push(newGood);
//将添加div隐藏
$scope.showAdd = false;
//展示table
$scope.showTable = true;
}
//删除
$scope.delete = function (id) {
//遍历json，根据id删除
for (var i = 0; i < $scope.Goods.length; i++) {
if ($scope.Goods[i].id == id) {
$scope.Goods.splice(i,1);
}
}
/*全部删除后隐藏table*/
if ($scope.Goods.length == 0) {
$scope.showTable = false;
}
}
//创建修改的字段
var updateGood = [];
$scope.updateName = "";
$scope.updatePrice = "";
$scope.updateGdate = "";
$scope.updateProduct = "";
//修改
$scope.update = function (id) {
/*展示修改div*/
$scope.showUpdate = true;
//根据索引获取指定对象
for (var i = 0; i < $scope.Goods.length; i++) {
//如果在原json中找到与id相同的对象
if ($scope.Goods[i].id == id) {
//把相同的对象存入到修改的json中
updateGood = $scope.Goods[i];
}
}
//回显
$scope.updateName = updateGood.name;
$scope.updatePrice = updateGood.price;
$scope.updateGdate = updateGood.gdate;
$scope.updateProduct = updateGood.product;
//给提交按钮绑定
$scope.submit = function () {
//修改索引指定的值
updateGood.name = $scope.updateName;
updateGood.price = $scope.updatePrice;
updateGood.gdate = $scope.updateGdate;
updateGood.product = $scope.updateProduct;
/*隐藏修改的div*/
$scope.showUpdate = false;/*修改div*/
}
}
//全选、全不选
$scope.checkAllFun = function () {
for (i in $scope.Goods) {
//将json中所有小的复选框的状态 = 总的复选框
$scope.Goods[i].check = $scope.checkAll;
}
}
//批量删除
$scope.delAll = function () {
//新建一个json串，用来储存所有被选中的对象
var newJson = [];
for (i in $scope.Goods) {
//如果json中的对象被选中了
if ($scope.Goods[i].check) {
//那么把它添加到新的json
newJson.push($scope.Goods[i]);
}
}
//遍历新的json
for (i1 in newJson) {
//遍历原来的json
for (i2 in $scope.Goods) {
//如果新的json中的对象与原来的json中的对象一样
if (newJson[i1] == $scope.Goods[i2]) {
//把一样的删除
$scope.Goods.splice(i2,1);
}
}
}
/*全部删除后隐藏table*/
if ($scope.Goods.length == 0) {
$scope.showTable = false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center><br />
<!--模糊查询+排序+添加按钮-->
查询：<input type="text" placeholder="请输入搜索关键字..." ng-model="search" />
排序：<select ng-model="orderCheck">
<option value="">--请选择--</option>
<option value="name">名称正序</option>
<option value="-name">名称倒序</option>
<option value="price">价格正序</option>
<option value="-price">价格倒序</option>
<option value="gdate">日期正序</option>
<option value="-gdate">日期倒序</option>
<option value="product">总部正序</option>
<option value="-product">总部倒序</option>
</select>
<input type="button" value="入库" ng-click="showAdd = !showAdd" />
<br /><br />
<!--添加的div-->
<div ng-show="showAdd">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="name" /><br />
商品价格：<input type="text" placeholder="请输入商品价格" ng-model="price" /><br />
发布时间：<input type="text" placeholder="请输入发布时间" ng-model="gdate" /><br />
公司总部：<input type="text" placeholder="请输入公司总部" ng-model="product" /><br /><br />
<input type="button" value="添加" ng-click="add()" />
</div>
<br />
<!--展示的table-->
<table border="1px" cellspacing="0" cellpadding="0" style="width: 45%;text-align: center;" ng-show="showTable">
<tr style="background-color: lightgray;">
<th><input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()" /></th>
<th>编号</th>
<th ng-click="orderCheck = 'name'">名称</th>
<th ng-click="orderCheck = 'price'">价格</th>
<th ng-click="orderCheck = 'gdate'">发布时间</th>
<th ng-click="orderCheck = 'product'">公司总部</th>
<th><input type="button" value="批量删除" ng-click="delAll()" /></th>
</tr>
<tr ng-repeat="x in Goods | filter:search | orderBy:orderCheck"
class="{{$index%2==0?'color1':'color2'}}">
<td><input type="checkbox" ng-model="x.check" /></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.price}}</td>
<td>{{x.gdate}}</td>
<td>{{x.product}}</td>
<td>
<input type="button" value="删除" ng-click="delete(x.id)"/>
<input type="button" value="修改" ng-click="update(x.id)" />
</td>
</tr>
</table><br />
<!--修改的div-->
<div ng-show="showUpdate">
商品名称：<input type="text" ng-model="updateName" /><br />
商品价格：<input type="text" ng-model="updatePrice" /><br />
发布时间：<input type="text" ng-model="updateGdate" /><br />
公司总部：<input type="text" ng-model="updateProduct" /><br /><br />
<input type="button" value="提交" ng-click="submit()" />
</div>
</center>
</body>
</html>