angularJS購物車，表單判斷
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<style>
.tab1 tbody tr:nth-child(odd){
background: silver;
}
.tab1 thead tr{
background: grey;
}
.tab1{
width: 700px;
}
.tab2{
margin-top: 30px;
margin-left: 100px;
}
</style>
<script>
angular.module("myApp",[]).controller("myCtrl",
function($scope) {
$scope.title="id";
$scope.desc=false;
$scope.arrs = [{
"id": 1,
"name": "OPPO R9sk",
"username": "關羽",
"tel": "15777777777",
"price": 4999,
"city": "北京",
"time":"08-11 12-11",
"fahuo":"發貨",
"state":false
}, {
"id": 2,
"name": "VIVO X20",
"username": "趙雲",
"tel": "15333333333",
"price": 2998,
"city": "天津",
"time": "04-11 12-11",
"fahuo":"發貨",
"state":false
}, {
"id": 3,
"name": "iPhone 8 Plus",
"username": "曹操",
"tel": "15111111111",
"price": 7588,
"city": "上海",
"time": "12-11 12-11",
"fahuo":"發貨",
"state":false
}];
for (var i=0;i<$scope.arrs.length;i++) {
$scope.arrs[i].name.replace("/米/g","*")
}
//全選
$scope.check=function(){
var is=$scope.ischeck;
for (var i=0;i<$scope.arrs.length;i++) {
$scope.arrs[i].state=is;
}
}
//刪除
$scope.del=function(a){
if(confirm("確定刪除用戶？")){
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].id==a.id){
$scope.arrs.splice(i,1);
}
}
}
}
//批量刪除
$scope.pidel=function(){
var datas=[];
for (var b=0;b<$scope.arrs.length;b++) {
if($scope.arrs[b].state==true){
datas.push($scope.arrs[b].name);
}
}
if(datas.length>0){
if(confirm("確定刪除用戶？")){
for (i in datas) {
var name=datas[i];
for (j in $scope.arrs) {
if($scope.arrs[j].name==name){
$scope.arrs.splice(j,1);
}
}
}
}
}else{
alert("請選擇");
}
}
//點擊修改發貨
$scope.zhuang=function(index){
if($scope.arrs[index].fahuo=="發貨"){
$scope.arrs[index].fahuo="已發貨";
console.log($scope.arrs);
}
}
$scope.zhengfu = "";
//點擊按鈕 根據列名排序
$scope.idsort = function(liem) {
if($scope.zhengfu == true) {
$scope.zhengfu = false;
} else {
$scope.zhengfu = true;
}
}
//批量發貨
$scope.pilFa=function(){
for (var i=0;i<$scope.arrs.length;i++) {
if($scope.arrs[i].state){
$scope.arrs[i].fahuo="已發貨";
}
}
}
//添加數據
$scope.name1="";
$scope.username1="";
$scope.price1="";
$scope.tel1="";
$scope.city1="";
$scope.time1="";
$scope.add=function(){
var aas={
"id": $scope.arrs.length+1,
"name":$scope.name1,
"username":$scope.username1,
"tel":$scope.tel1,
"price":$scope.price1,
"city": $scope.city1,
"time":$scope.time1,
"fahuo":"發貨",
"state":false
}
$scope.arrs.push(aas);
for (var i=0;i<$scope.arrs.length;i++) {
$scope.arrs[i].name=$scope.arrs[i].name.replace("/米/g","*");
}
}
//點擊新增彈出框
$scope.tab=false;
$scope.zeng=function(){
$scope.tab=true;
}
$scope.selfahuo="選擇狀態";
$scope.faH=function(fahuo,selfahuo){
if($scope.selfahuo=="選擇狀態"){
return true;
}else{
for (var i=0;i<$scope.arrs.length;i++) {
if(fahuo==selfahuo){
return true;
}else{
return false;
}
}
return false;
}
}
$scope.startm="開始月份";
$scope.endm="結束月份";
$scope.seltime=function(time,startm,endm){
if($scope.startm=="開始月份"||$scope.endm=="結束月份"){
return true;
}else{
var spl=time.split(" ");
var timespl=spl[0].split("-");
var numtime=parseInt(timespl[0]);
if(numtime>=$scope.startm&&numtime<=$scope.endm){
return true;
}else{
return false;
}
}
}
$scope.orderAll=function(){
var iszh=$scope.isAll;
if(iszh=="1"){
$scope.title="tel";
$scope.desc=false;
}else if(iszh=="2"){
$scope.title="tel";
$scope.desc=true;
}else if(iszh=="3"){
$scope.title="price";
$scope.desc=false;
}else if(iszh=="4"){
$scope.title="price";
$scope.desc=true;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="用戶名搜索" ng-model="sname"/>
<input type="text" placeholder="手機號搜索" ng-model="stel"/>
<select ng-model="selcity">
<option>選擇城市</option>
<option>北京</option>
<option>上海</option>
<option>重慶</option>
<option>天津</option>
</select>
<select ng-model="selfahuo">
<option>選擇狀態</option>
<option>已發貨</option>
<option>發貨</option>
</select>
<select ng-model="startm">
<option>開始月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="endm">
<option>結束月份</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="isAll" ng-change="orderAll()">
<option value="1">按電話正序排</option>
<option value="2">按電話倒序排</option>
<option value="3">按價格正序排</option>
<option value="4">按價格倒序排</option>
</select>
<br />
<input type="button" value="新增訂單" style="background: green;margin-top: 10px;" ng-click="zeng()"/>
<input type="button" value="批量發貨" style="background: green;margin-top: 10px;" ng-click="pilFa()"/>
<input type="button" value="批量刪除" style="background: red;margin-top: 10px;" ng-click="pidel()"/>
<table border="1px" class="tab1" cellspacing="0" cellpadding="0">
<thead>
<tr align="center">
<td><input type="checkbox" ng-model="ischeck" ng-click="check()"/></td>
<td><a href="#" style="color: black; text-decoration: none;" ng-click="idsort('id')">ID</a></td>
<td>商品名</td>
<td>用戶名</td>
<td ng-click="title='tel';desc=!desc">手機號</td>
<td ng-click="title='price';desc=!desc">價格</td>
<td>城市</td>
<td>下單時間</td>
<td>狀態</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in arrs|orderBy:'id':zhengfu|orderBy:title:desc|filter:{'name':sname,'tel':stel,'city':selcity}" ng-show="faH(a.fahuo,selfahuo)&&seltime(a.time,startm,endm)" align="center">
<td><input type="checkbox" ng-model="a.state"/></td>
<td>{{a.id}}</td>
<td>
<span ng-hide="a.edit">{{a.name}}</span>
<span ng-show="a.edit==true"><input type="text" ng-model="a.name"/></span>
</td>
<td>{{a.username}}</td>
<td>{{a.tel}}</td>
<td>{{a.price|currency:"￥"}}</td>
<td>{{a.city}}</td>
<td>{{a.time}}</td>
<td>
<span ng-show="a.fahuo=='發貨'"><a href="#" ng-click="zhuang($index)">{{a.fahuo}}</a></span>
<span ng-show="a.fahuo=='已發貨'">{{a.fahuo}}</span>
</td>
<td><a href="#" ng-hide="a.edit" ng-click="a.edit=true">修改</a>
<a href="#" ng-show="a.edit==true" ng-click="a.edit=false">保存</a>
<a href="#" ng-click="del(a)">刪除</a></td>
</tr>
</tbody>
</table>
<table border="1px" class="tab2" ng-show="tab">
<tr>
<td><input type="text" placeholder="輸入商品名" ng-model="name1"/></td>
</tr>
<tr>
<td><input type="text" placeholder="輸入用戶名" ng-model="username1"/></td>
</tr>
<tr><td><input type="text" placeholder="價格" ng-model="price1"/></td></tr>
<tr><td><input type="text" placeholder="手機號" ng-model="tel1"/></td></tr>
<tr><td><input type="text" placeholder="城市" ng-model="city1"/></td></tr>
<tr><td><input type="text" placeholder="下單時間" ng-model="time1"/></td></tr>
<tr align="center"><td><input type="button" value="提交" ng-click="add()"/></td></tr>
</table>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章