angularjs增刪 查詢 排序(修改)
阿新 • • 發佈：2019-02-15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>月考練習</title>
<style>
*{
margin: 0 auto;
padding: 0;
}
nav{
width: 50%;
margin-top: 50px;
}
.btncolor{
background-color: dodgerblue;
border-radius: 6px;
}
table{
width: 50%;
margin-top: 5px;
}
.laft{
margin-left: 230px;
}
.true {
background: greenyellow;
border-radius: 10px;
}
.false {
background: yellow;
border-radius: 10px;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript">
var mo=angular.module("myApp",[]);
mo.controller("myCtrl",function($scope){
//初始資料
var arr = [{
"flag":false,
"gid": "2001",
"gname": "iPhoneX",
"uname": "張三",
"tel": "13525565588",
"price": 8699.00,
"city": "北京",
"time":1509104021000,
"state":false
},{
"flag":false,
"gid": "3006",
"gname": "iPhone6",
"uname": "王紅",
"tel": "18524565588",
"price": 5635.00,
"city": "鄭州",
"time":1513104021000,
"state":false
},{
"flag":false,
"gid": "5312",
"gname": "iPhone7",
"uname": "趙小龍",
"tel": "17545585598",
"price": 6180.00,
"city": "北京",
"time":1523104021000,
"state":false
},{
"flag":false,
"gid": "2132",
"gname": "iPhone8",
"uname": "趙強",
"tel": "17625565618",
"price": 7190.00,
"city": "上海",
"time": 1503104021000,
"state":false
}];
//初始化介面
$scope.goods = arr;
//發貨
$scope.didgoods=function($index){
arr[$index].state=true;
}
//根據名字查詢
$scope.selgname=function($event){
var arr_temp=[];//定義臨時陣列
if ($event.keyCode==13) {
for (var i=0;i<arr.length;i++) {//遍歷陣列查詢
if (arr[i].gname.indexOf($scope.name)!=-1) {
arr_temp.push(arr[i]);
}
}//賦值
$scope.goods=arr_temp;
}
}
//根據手機號查詢
$scope.seltel=function($event){
var arr_temp=[];//定義臨時陣列
if ($event.keyCode==13) {
for (var i=0;i<arr.length;i++) {//遍歷陣列查詢
if (arr[i].tel.indexOf($scope.tel)!=-1) {
arr_temp.push(arr[i]);
}
}//賦值
$scope.goods=arr_temp;
}
}
//篩選發貨/未發貨
$scope.isFaHuo=function() {
var arr_temp=[];//定義一個臨時陣列，儲存物件
if ($scope.did=="已發貨") {//獲取select裡面的值
for(var i=0;i<arr.length;i++){
var ff=arr[i].state;//獲取發貨狀態
if (ff==true) {
arr_temp.push(arr[i]);
}
}
} else{
for(var i=0;i<arr.length;i++){
var ff=arr[i].state;//獲取發貨狀態
if (ff==false) {
arr_temp.push(arr[i]);
}
}
}
//賦值
$scope.goods=arr_temp;
}
/*goods 自負責顯示 MVVM
arr 負責資料
臨時arr_temp 臨時儲存結果*/
//根據id排序
var gid_flag=true;
$scope.gid_orderBy=function(){
if (gid_flag==true) {
arr.sort(function(a,b){
return a.gid-b.gid;
})
} else{
arr.sort(function(a,b){
return b.gid-a.gid;
});
}
gid_flag=!gid_flag;
$scope.goods=arr;
}
//根據價格排序
var price_flag=true;
$scope.price_orderBy=function(){
if (price_flag==true) {
arr.sort(function(a,b){
return a.price-b.price;
})
} else{
arr.sort(function(a,b){
return b.price-a.price;
});
}
price_flag=!price_flag;
$scope.goods=arr;
}
//根據時間排序
var time_flag=true;
$scope.time_orderBy=function(){
if (time_flag==true) {
arr.sort(function(a,b){
return a.time-b.time;
})
} else{
arr.sort(function(a,b){
return b.time-a.time;
});
}
time_flag=!time_flag;
$scope.goods=arr;
}
//批量刪除
$scope.dele=function(){
//遍歷陣列，flag = true,而且state = true;刪除，否則不刪除
for (var i=arr.length-1;i>=0;i--) {
var good=arr[i];
if (good.flag&&good.state) {
arr.splice(i,1)
}
}
$scope.goods=arr;
}
//點選複選框，改變選中狀態
$scope.box=function($index){
arr[$index].flag=!arr[$index].flag;
$scope.goods=arr;
}
$scope.click=function(){
$scope.show=true;
$scope.gname1="";
$scope.uname1="";
$scope.tel1="";
$scope.price1="";
$scope.city1="";
}
function sj(){
var math=Math.random()*10000;
return Math.ceil(math);
}
function selnull(){
$("span").each(function(){
$(this).html("");
})
}
$scope.add=function(){
selnull();
var flag=false;
if ($scope.gname1==undefined||$scope.gname1=="") {
$("#gname1_lag").html("<font color='red'>商品名不能為空</font>")
$("#gname1").css({"border":"1px solid red"})
flag=false;
}else if($scope.uname1==undefined||$scope.uname1=="") {
$("#gname1").css({"border":"1px solid #000000"})
$("#uname1_lag").html("<font color='red'>使用者名稱不能為空</font>")
$("#uname1").css({"border":"1px solid red"})
flag=false;
}else if ($scope.tel1==undefined||$scope.tel1=="") {
$("#uname1").css({"border":"1px solid #000000"})
$("#tel1_lag").html("<font color='red'>電話號碼不能為空</font>")
$("#tel1").css({"border":"1px solid red"})
flag=false;
}else if ($scope.price1==undefined||$scope.price1=="") {
$("#tel1").css({"border":"1px solid #000000"})
$("#price1_lag").html("<font color='red'>價格不能為空</font>")
$("#price1").css({"border":"1px solid red"})
flag=false;
}else if ($scope.city1==undefined||$scope.city1=="") {
$("#price1").css({"border":"1px solid #000000"})
$("#city1_lag").html("<font color='red'>城市必選</font>")
$("#city1").css({"border":"1px solid red"})
flag=false;
}else{
flag=true;
}
if (flag) {
var obj={
"flag":false,
"gid": sj(),
"gname": $scope.gname1,
"uname": $scope.uname1,
"tel": $scope.tel1,
"price": $scope.price1,
"city": $scope.city1,
"state":false
}
$scope.goods.push(obj);
$scope.show=false;
}
}
})
//自定義過濾器，根據state的狀態，返回不同的值
mo.filter("myFilter",function(){
return function(obj){
if (obj) {
return "已發貨";
} else{
return "未發貨";
}
return obj;
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<nav>
<input type="button" value="新增訂單" class="btncolor" ng-click="click()"/>
<input type="button" value="批量刪除" class="btncolor" ng-click="dele()"/>
<input type="text" placeholder="按商品名稱查詢" class="laft" ng-keydown="selgname($event)" ng-model="name" style="border-radius: 6px;"/>
<input type="text" placeholder="按手機號查詢" ng-keydown="seltel($event)" ng-model="tel" style="border-radius: 6px;"/>
<select ng-change="isFaHuo()" ng-model="did" ng-init="did='--按狀態查詢--'" style="border-radius: 6px;">
<option>--按狀態查詢--</option>
<option>已發貨</option>
<option>未發貨</option>
</select>
</nav>
<center>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox"/></th>
<th>id<input type="button" value="排序" class="btncolor" ng-click="gid_orderBy()"/></th>
<th>商品名</th>
<th>使用者名稱</th>
<th>手機號</th>
<th>價格<input type="button" value="排序" class="btncolor" ng-click="price_orderBy()"/></th>
<th>城市</th>
<th>下單時間<input type="button" value="排序" class="btncolor" ng-click="time_orderBy()"/></th>
<th>狀態</th>
</tr>
<tr ng-repeat="good in goods">
<td align="center"><input type="checkbox" ng-click="box($index)" /></td>
<td>{{good.gid}}</td>
<td>{{good.gname}}</td>
<td>{{good.uname}}</td>
<td>{{good.tel}}</td>
<td>{{good.price|currency:"¥:"}}</td>
<td>{{good.city}}</td>
<td>{{good.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td align="center">
<input type="button" value="{{good.state|myFilter}}" class="{{good.state}}" ng-click="didgoods($index)"/>
</td>
</tr>
</table>
<fieldset ng-show="show">
<legend>新增使用者資訊</legend>
商品名<input type="text" ng-model="gname1" id="gname1"/><span id="gname1_lag"></span><br />
使用者名稱<input type="text" ng-model="uname1" id="uname1"/><span id="uname1_lag"></span><br />
手機號<input type="text" ng-model="tel1" id="tel1"/><span id="tel1_lag"></span><br />
價格為<input type="text" ng-model="price1" id="price1"/><span id="price1_lag"></span><br />
城市<input type="text" ng-model="city1" id="city1"/><span id="city1_lag"></span><br />
<button ng-click="add()">儲存</button>
</fieldset>
</center>
</body>
<html>
<head>
<meta charset="utf-8" />
<title>月考練習</title>
<style>
*{
margin: 0 auto;
padding: 0;
}
nav{
width: 50%;
margin-top: 50px;
}
.btncolor{
background-color: dodgerblue;
border-radius: 6px;
}
table{
width: 50%;
margin-top: 5px;
}
.laft{
margin-left: 230px;
}
.true {
background: greenyellow;
border-radius: 10px;
}
.false {
background: yellow;
border-radius: 10px;
}
</style>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript">
var mo=angular.module("myApp",[]);
mo.controller("myCtrl",function($scope){
//初始資料
var arr = [{
"flag":false,
"gid": "2001",
"gname": "iPhoneX",
"uname": "張三",
"tel": "13525565588",
"price": 8699.00,
"city": "北京",
"time":1509104021000,
"state":false
},{
"flag":false,
"gid": "3006",
"gname": "iPhone6",
"uname": "王紅",
"tel": "18524565588",
"price": 5635.00,
"city": "鄭州",
"time":1513104021000,
"state":false
},{
"flag":false,
"gid": "5312",
"gname": "iPhone7",
"uname": "趙小龍",
"tel": "17545585598",
"price": 6180.00,
"city": "北京",
"time":1523104021000,
"state":false
},{
"flag":false,
"gid": "2132",
"gname": "iPhone8",
"uname": "趙強",
"tel": "17625565618",
"price": 7190.00,
"city": "上海",
"time": 1503104021000,
"state":false
}];
//初始化介面
$scope.goods = arr;
//發貨
$scope.didgoods=function($index){
arr[$index].state=true;
}
//根據名字查詢
$scope.selgname=function($event){
var arr_temp=[];//定義臨時陣列
if ($event.keyCode==13) {
for (var i=0;i<arr.length;i++) {//遍歷陣列查詢
if (arr[i].gname.indexOf($scope.name)!=-1) {
arr_temp.push(arr[i]);
}
}//賦值
$scope.goods=arr_temp;
}
}
//根據手機號查詢
$scope.seltel=function($event){
var arr_temp=[];//定義臨時陣列
if ($event.keyCode==13) {
for (var i=0;i<arr.length;i++) {//遍歷陣列查詢
if (arr[i].tel.indexOf($scope.tel)!=-1) {
arr_temp.push(arr[i]);
}
}//賦值
$scope.goods=arr_temp;
}
}
//篩選發貨/未發貨
$scope.isFaHuo=function() {
var arr_temp=[];//定義一個臨時陣列，儲存物件
if ($scope.did=="已發貨") {//獲取select裡面的值
for(var i=0;i<arr.length;i++){
var ff=arr[i].state;//獲取發貨狀態
if (ff==true) {
arr_temp.push(arr[i]);
}
}
} else{
for(var i=0;i<arr.length;i++){
var ff=arr[i].state;//獲取發貨狀態
if (ff==false) {
arr_temp.push(arr[i]);
}
}
}
//賦值
$scope.goods=arr_temp;
}
/*goods 自負責顯示 MVVM
arr 負責資料
臨時arr_temp 臨時儲存結果*/
//根據id排序
var gid_flag=true;
$scope.gid_orderBy=function(){
if (gid_flag==true) {
arr.sort(function(a,b){
return a.gid-b.gid;
})
} else{
arr.sort(function(a,b){
return b.gid-a.gid;
});
}
gid_flag=!gid_flag;
$scope.goods=arr;
}
//根據價格排序
var price_flag=true;
$scope.price_orderBy=function(){
if (price_flag==true) {
arr.sort(function(a,b){
return a.price-b.price;
})
} else{
arr.sort(function(a,b){
return b.price-a.price;
});
}
price_flag=!price_flag;
$scope.goods=arr;
}
//根據時間排序
var time_flag=true;
$scope.time_orderBy=function(){
if (time_flag==true) {
arr.sort(function(a,b){
return a.time-b.time;
})
} else{
arr.sort(function(a,b){
return b.time-a.time;
});
}
time_flag=!time_flag;
$scope.goods=arr;
}
//批量刪除
$scope.dele=function(){
//遍歷陣列，flag = true,而且state = true;刪除，否則不刪除
for (var i=arr.length-1;i>=0;i--) {
var good=arr[i];
if (good.flag&&good.state) {
arr.splice(i,1)
}
}
$scope.goods=arr;
}
//點選複選框，改變選中狀態
$scope.box=function($index){
arr[$index].flag=!arr[$index].flag;
$scope.goods=arr;
}
$scope.click=function(){
$scope.show=true;
$scope.gname1="";
$scope.uname1="";
$scope.tel1="";
$scope.price1="";
$scope.city1="";
}
function sj(){
var math=Math.random()*10000;
return Math.ceil(math);
}
function selnull(){
$("span").each(function(){
$(this).html("");
})
}
$scope.add=function(){
selnull();
var flag=false;
if ($scope.gname1==undefined||$scope.gname1=="") {
$("#gname1_lag").html("<font color='red'>商品名不能為空</font>")
$("#gname1").css({"border":"1px solid red"})
flag=false;
}else if($scope.uname1==undefined||$scope.uname1=="") {
$("#gname1").css({"border":"1px solid #000000"})
$("#uname1_lag").html("<font color='red'>使用者名稱不能為空</font>")
$("#uname1").css({"border":"1px solid red"})
flag=false;
}else if ($scope.tel1==undefined||$scope.tel1=="") {
$("#uname1").css({"border":"1px solid #000000"})
$("#tel1_lag").html("<font color='red'>電話號碼不能為空</font>")
$("#tel1").css({"border":"1px solid red"})
flag=false;
}else if ($scope.price1==undefined||$scope.price1=="") {
$("#tel1").css({"border":"1px solid #000000"})
$("#price1_lag").html("<font color='red'>價格不能為空</font>")
$("#price1").css({"border":"1px solid red"})
flag=false;
}else if ($scope.city1==undefined||$scope.city1=="") {
$("#price1").css({"border":"1px solid #000000"})
$("#city1_lag").html("<font color='red'>城市必選</font>")
$("#city1").css({"border":"1px solid red"})
flag=false;
}else{
flag=true;
}
if (flag) {
var obj={
"flag":false,
"gid": sj(),
"gname": $scope.gname1,
"uname": $scope.uname1,
"tel": $scope.tel1,
"price": $scope.price1,
"city": $scope.city1,
"state":false
}
$scope.goods.push(obj);
$scope.show=false;
}
}
})
//自定義過濾器，根據state的狀態，返回不同的值
mo.filter("myFilter",function(){
return function(obj){
if (obj) {
return "已發貨";
} else{
return "未發貨";
}
return obj;
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<nav>
<input type="button" value="新增訂單" class="btncolor" ng-click="click()"/>
<input type="button" value="批量刪除" class="btncolor" ng-click="dele()"/>
<input type="text" placeholder="按商品名稱查詢" class="laft" ng-keydown="selgname($event)" ng-model="name" style="border-radius: 6px;"/>
<input type="text" placeholder="按手機號查詢" ng-keydown="seltel($event)" ng-model="tel" style="border-radius: 6px;"/>
<select ng-change="isFaHuo()" ng-model="did" ng-init="did='--按狀態查詢--'" style="border-radius: 6px;">
<option>--按狀態查詢--</option>
<option>已發貨</option>
<option>未發貨</option>
</select>
</nav>
<center>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox"/></th>
<th>id<input type="button" value="排序" class="btncolor" ng-click="gid_orderBy()"/></th>
<th>商品名</th>
<th>使用者名稱</th>
<th>手機號</th>
<th>價格<input type="button" value="排序" class="btncolor" ng-click="price_orderBy()"/></th>
<th>城市</th>
<th>下單時間<input type="button" value="排序" class="btncolor" ng-click="time_orderBy()"/></th>
<th>狀態</th>
</tr>
<tr ng-repeat="good in goods">
<td align="center"><input type="checkbox" ng-click="box($index)" /></td>
<td>{{good.gid}}</td>
<td>{{good.gname}}</td>
<td>{{good.uname}}</td>
<td>{{good.tel}}</td>
<td>{{good.price|currency:"¥:"}}</td>
<td>{{good.city}}</td>
<td>{{good.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td align="center">
<input type="button" value="{{good.state|myFilter}}" class="{{good.state}}" ng-click="didgoods($index)"/>
</td>
</tr>
</table>
<fieldset ng-show="show">
<legend>新增使用者資訊</legend>
商品名<input type="text" ng-model="gname1" id="gname1"/><span id="gname1_lag"></span><br />
使用者名稱<input type="text" ng-model="uname1" id="uname1"/><span id="uname1_lag"></span><br />
手機號<input type="text" ng-model="tel1" id="tel1"/><span id="tel1_lag"></span><br />
價格為<input type="text" ng-model="price1" id="price1"/><span id="price1_lag"></span><br />
城市<input type="text" ng-model="city1" id="city1"/><span id="city1_lag"></span><br />
<button ng-click="add()">儲存</button>
</fieldset>
</center>
</body>
</html>
/* $scope.click=function(){
$scope.show=true;
$scope.uname="";
$scope.uage="";
$scope.ucity="";
$scope.add=function(){
var obj={
"flag":false,
"name": $scope.uname,
"age": $scope.uage,
"city": $scope.ucity
}
$scope.users.push(obj)
$scope.show=false;
}
}
$scope.update = function($index){
$scope.show=true;
$scope.uname=$scope.users[$index].name;
$scope.uage=$scope.users[$index].age;
$scope.ucity=$scope.users[$index].city;
$scope.index=$index;
$scope.add=function(index){
if (index!=undefined||index!="") {
var text={
"name": $scope.uname,
"age": $scope.uage,
"city": $scope.ucity
}
$scope.users.splice($scope.index,1,text);
$scope.show=false;
}
}
};
*/