<!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:"Samsung Note 8",price:7988,gdate:"2014-08-23",product:"Chengnan City",check:false},
];
//Assign initial value
$scope.search = "";/*Query*/
$scope.orderCheck = "";/*Order*/
$scope.showAdd = false;/*Add div*/
$scope.checkAll = false ;/*Select all*/
$scope.showUpdate = false;/*Modify div*/
$scope.showTable = true;/*Show table*/
//Create fields to add
$scope.name = "";
$ scope.price = "";
$scope.gdate = "";
$scope.product = "";
$scope.check = false;
//Add
$scope. add = function () {
//Create a new item empty object
var newGood = {};
//Assign the object
newGood.id = $scope.id++;
newGood.name = $scope.name;
newGood.price = $scope.price;
newGood.gdate = $scope.gdate;
newGood.product = $scope.product;
newGood.check = $scope.check;
//Add new items to json
$scope.Goods.push(newGood);
//Hide the added div
$scope.showAdd = false;
// show table
$scope.showTable = true;
}
//delete
$scope.delete = function (id) {
//traverse json and delete according to id
for (var i = 0; i < $scope.Goods.length; i++) {
if ($scope.Goods[i]. id == id) {
$scope.Goods.splice(i,1);
}
}
/*Hide table after all deleted*/
if ($scope.Goods.length == 0) {
$scope.showTable = false;
}
}
//Create modified field
var updateGood = [];
$scope.updateName = "";
$scope.updatePrice = "";
$scope.updateGdate = "";
$scope.updateProduct = "";
//Modify
$scope.update = function (id) {
/*Show modified div*/
$scope.showUpdate = true ;
//Get the specified object according to the index
for (var i = 0; i < $scope.Goods.length; i++) {
//If the object with the same id is found in the original json
if ($scope.Goods[i].id == id) {
//Store the same object in the modified json
updateGood = $scope.Goods[i];
}
}
// echo
$scope.updateName = updateGood.name;
$scope.updatePrice = updateGood.price;
$scope.updateGdate = updateGood.gdate;
$scope.updateProduct = updateGood.product; //Bind $scope
to the submit button .
submit = function () {
//Modify the value specified by the index
updateGood.name = $scope.updateName;
updateGood.price = $scope.updatePrice;
updateGood.gdate = $scope.updateGdate;
updateGood.product = $scope.updateProduct;
/ *hide the modified div*/
$scope.showUpdate = false;/*Modify div*/
}
}
//Select all, unselect all
$scope.checkAllFun = function () {
for (i in $scope.Goods) {
//Remove all small items in json Check box state = total check box
$scope.Goods[i].check = $scope.checkAll;
}
}
//Batch delete
$scope.delAll = function () {
//Create a new json string for Store all selected objects
var newJson = [];
for (i in $scope.Goods) {
//If the objects in json are selected
if ($scope.Goods[i].check) {
//then add it to the new json
newJson.push($scope.Goods[i]);
}
}
//traverse the new json
for (i1 in newJson) {
// Traverse the original json
for (i2 in $scope.Goods) {
//If the object in the new json is the same as the object in the original json
if (newJson[i1] == $scope.Goods[i2]) {
//Remove the same
$scope.Goods.splice(i2,1);
}
}
}
/*Hide table after all deleted*/
if ($scope.Goods.length == 0) {
$scope.showTable = false;
}
}
});
</script>
</head>
<body ng-app=" myApp" ng-controller="myCtrl">
<center><br />
<!--Fuzzy query+sort+add button-->
Query: <input type="text" placeholder="Please enter a search keyword.. ." ng-model="search" />
Order: <select ng-model="orderCheck">
<option value="">--Please select--< /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 /> Product name: <input type="text" placeholder="Please enter the product name" ng-model="name" /> <br /> <div ng-show="showAdd">
<!--Added div-->
Product price: <input type="text" placeholder="Please enter the product price" ng-model="price" /><br />
Release time: <input type="text" placeholder="Please enter the release time" ng -model="gdate" /><br />
Company headquarters:<input type="text" placeholder="Please enter company headquarters" ng-model="product" /><br /><br />
<input type ="button" value="Add" ng-click="add()" />
</div>
<br />
<!--Show 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:"Samsung Note 8",price:7988,gdate:"2014-08-23",product:"Chengnan City",check:false},
];
//Assign initial value
$scope.search = "";/*Query*/
$scope.orderCheck = "";/*Order*/
$scope.showAdd = false;/*Add div*/
$scope.checkAll = false ;/*Select all*/
$scope.showUpdate = false;/*Modify div*/
$scope.showTable = true;/*Show table*/
//Create fields to add
$scope.name = "";
$ scope.price = "";
$scope.gdate = "";
$scope.product = "";
$scope.check = false;
//Add
$scope. add = function () {
//Create a new item empty object
var newGood = {};
//Assign the object
newGood.id = $scope.id++;
newGood.name = $scope.name;
newGood.price = $scope.price;
newGood.gdate = $scope.gdate;
newGood.product = $scope.product;
newGood.check = $scope.check;
//Add new items to json
$scope.Goods.push(newGood);
//Hide the added div
$scope.showAdd = false;
// show table
$scope.showTable = true;
}
//delete
$scope.delete = function (id) {
//traverse json and delete according to id
for (var i = 0; i < $scope.Goods.length; i++) {
if ($scope.Goods[i]. id == id) {
$scope.Goods.splice(i,1);
}
}
/*Hide table after all deleted*/
if ($scope.Goods.length == 0) {
$scope.showTable = false;
}
}
//Create modified field
var updateGood = [];
$scope.updateName = "";
$scope.updatePrice = "";
$scope.updateGdate = "";
$scope.updateProduct = "";
//Modify
$scope.update = function (id) {
/*Show modified div*/
$scope.showUpdate = true ;
//Get the specified object according to the index
for (var i = 0; i < $scope.Goods.length; i++) {
//If the object with the same id is found in the original json
if ($scope.Goods[i].id == id) {
//Store the same object in the modified json
updateGood = $scope.Goods[i];
}
}
// echo
$scope.updateName = updateGood.name;
$scope.updatePrice = updateGood.price;
$scope.updateGdate = updateGood.gdate;
$scope.updateProduct = updateGood.product; //Bind $scope
to the submit button .
submit = function () {
//Modify the value specified by the index
updateGood.name = $scope.updateName;
updateGood.price = $scope.updatePrice;
updateGood.gdate = $scope.updateGdate;
updateGood.product = $scope.updateProduct;
/ *hide the modified div*/
$scope.showUpdate = false;/*Modify div*/
}
}
//Select all, unselect all
$scope.checkAllFun = function () {
for (i in $scope.Goods) {
//Remove all small items in json Check box state = total check box
$scope.Goods[i].check = $scope.checkAll;
}
}
//Batch delete
$scope.delAll = function () {
//Create a new json string for Store all selected objects
var newJson = [];
for (i in $scope.Goods) {
//If the objects in json are selected
if ($scope.Goods[i].check) {
//then add it to the new json
newJson.push($scope.Goods[i]);
}
}
//traverse the new json
for (i1 in newJson) {
// Traverse the original json
for (i2 in $scope.Goods) {
//If the object in the new json is the same as the object in the original json
if (newJson[i1] == $scope.Goods[i2]) {
//Remove the same
$scope.Goods.splice(i2,1);
}
}
}
/*Hide table after all deleted*/
if ($scope.Goods.length == 0) {
$scope.showTable = false;
}
}
});
</script>
</head>
<body ng-app=" myApp" ng-controller="myCtrl">
<center><br />
<!--Fuzzy query+sort+add button-->
Query: <input type="text" placeholder="Please enter a search keyword.. ." ng-model="search" />
Order: <select ng-model="orderCheck">
<option value="">--Please select--< /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 /> Product name: <input type="text" placeholder="Please enter the product name" ng-model="name" /> <br /> <div ng-show="showAdd">
<!--Added div-->
Product price: <input type="text" placeholder="Please enter the product price" ng-model="price" /><br />
Release time: <input type="text" placeholder="Please enter the release time" ng -model="gdate" /><br />
Company headquarters:<input type="text" placeholder="Please enter company headquarters" ng-model="product" /><br /><br />
<input type ="button" value="Add" ng-click="add()" />
</div>
<br />
<!--Show 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>