HTML angular:訂單查詢添加等
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body
{
width: 1600px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
table
{
width: 1000px;
margin: auto;
margin-top: 50px;
}
div
{
margin: auto;
margin-top: 20px;
width: 500px;
height: 500px;
background: #c0a16b;
}
.b
{
background: red;
width: 200px;
height:200px;
}
button
{
background: #2aabd2;
}
.red
{
border: 1px solid red;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.data=
[
{done:false,sname:"iPhone4",name:"張三",phone:"15111111111",price:4999,city:"北京",time:"08-01 10:00",zhuai:"發貨"},
{done:false,sname:"小米6",name:"李四",phone:"1522222222",price:2999,city:"北京",time:"08-02 10:00",zhuai:"發貨"},
{done:false,sname:"華爲P9",name:"王五",phone:"15333333333",price:3999,city:"上海",time:"09-03 10:00",zhuai:"已發貨"},
{done:false,sname:"oppo r11",name:"趙六",phone:"154444444444",price:4999,city:"天津",time:"09-05 10:00",zhuai:"已收貨"},
{done:false,sname:"vivo",name:"周七",phone:"15555555555",price:2999,city:"重慶",time:"10-04 10:00",zhuai:"已發貨"},
]
//隱藏
$scope.show=false;
//新增訂單
$scope.newD=function () {
$scope.show=true;
}
$scope.uname="";
$scope.uphone="";
$scope.ucity="選擇城市";
//城市查詢
$scope.citys=function (item) {
if( $scope.ucity!="選擇城市")
{
if( $scope.ucity==item.city)
{
return true;
}
else
{
return false;
}
}
else
{
return true;
}
}
//狀態查詢
$scope.uzhuai="狀態";
//城市查詢
$scope.zhuais=function (item) {
if( $scope.uzhuai!="狀態")
{
if( $scope.uzhuai==item.zhuai)
{
return true;
}
else
{
return false;
}
}
else
{
return true;
}
}
//狀態變化
$scope.zhuang=function (index) {
if($scope.data[index].zhuai=="發貨")
{
$scope.data[index].zhuai="已發貨";
}
if($scope.data[index].zhuai=="已發貨")
{
$scope.data[index].zhuai="已收貨";
}
}
//排序
$scope.sortname="";
$scope.pai=function (name) {
$scope.sortname=name;
}
//批量刪除
$scope.delete=function () {
var n=0;
for(var i=0;i<$scope.data.length;i++)
{
if($scope.data[i].done==true)
{
$scope.data.splice(i,1);
n++;
i--;
}
}
if(n==0)
{
alert("請勾選!!!");
}
}
//全選反選
$scope.check=false;
$scope.checkAll=function () {
for(var i=0;i<$scope.data.length;i++)
{
if( $scope.check==true)
{
$scope.data[i].done=true;
}
else
{
$scope.data[i].done=false;
}
}
}
//全選按鈕狀態
$scope.checks=function () {
var n=0;
for(var i=0;i<$scope.data.length;i++)
{
if($scope.data[i].done==true)
{
n++;
}
else
{
n--;
}
}
if(n==$scope.data.length)
{
$scope.check=true;
}
else
{
$scope.check=false;
}
}
//日期之間
$scope.kai="開始月份";
$scope.jie="結束月份";
$scope.pan=function () {
if( $scope.kai!="開始月份" && $scope.jie!="結束月份")
{
//裝換爲int類型判斷
var kai=parseInt( $scope.kai);
var jie=parseInt($scope.jie);
for(var i=0;i<$scope.data.length;i++)
{
//拆分時間
var arr=$scope.data[i].time.split("-");
var da=parseInt(arr[0]);
console.log(da);
//判斷
if(da>=kai && da<=jie)
{
return true;
}
else
{
return false;
}
}
}
else
{
return true;
}
}
//添加新客戶
$scope.newsname="";
$scope.newname="";
$scope.newphone="";
$scope.b=false;
$scope.redcheck=false;
$scope.newcity="請選擇";
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
var myTime = month+"-"+day+" "+hours+":"+minute;
$scope.tj=function () {
if($scope.newsname==""|| $scope.newsname.length<6 || $scope.newsname.length>20 || $scope.newname.length<2 || $scope.newname>16 || $scope.newcity=="請選擇")
{
$scope.b=true;
$scope.redcheck=true;
}
else
{
$scope.data.push({done:false,sname: $scope.newsname,name:$scope.newname,phone:$scope.newphone,price:1999,city:$scope.newcity,time:myTime,zhuai:"發貨"})
$scope.b=false;
$scope.redcheck=false;
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" placeholder="用戶名搜索" ng-model="uname">
<input type="text" placeholder="手機號搜索" ng-model="uphone">
<select ng-model="ucity">
<option>選擇城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重慶</option>
</select>
<select ng-model="uzhuai">
<option>狀態</option>
<option>待發貨</option>
<option>發貨</option>
<option>已收貨</option>
<option>已發貨</option>
</select>
<select ng-model="kai">
<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="jie" ng-change="pan()">
<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><br/><br/><br/>
<button ng-click="newD()">新增訂單</button><button ng-click="delete()">批量刪除</button>
<table border="1px solide #000">
<thead>
<tr>
<th><input type="checkbox" ng-model="check" ng-click="checkAll()"></th>
<th>下標<span><button ng-click="pai('$index')">排序</button></span></th>
<th>商品名稱</th>
<th>用戶名</th>
<th>手機號</th>
<th>價格<span><button ng-click="pai('price')">排序</button></span></th>
<th>城市</th>
<th>下單時間<span><button ng-click="pai('time')">排序</button></span></th>
<th>狀態</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:{'name':uname}|filter:{'phone':uphone}|filter:citys|filter:zhuais|orderBy:sortname|filter:pan">
<td><input type="checkbox" ng-model="item.done" ng-click="checks()"></td>
<td>{{$index}}</td>
<td>{{item.sname}}</td>
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td>{{item.price|currency:"￥"}}</td>
<td>{{item.city}}</td>
<td>{{item.time}}</td>
<td ng-click="zhuang($index)">{{item.zhuai}}</td>
</tr>
</tbody>
</table>
<div ng-show="show">
<h2>新增訂單</h2>
商品名:<input type="text" placeholder="6-20個字符" ng-class="{red:redcheck}" ng-model="newsname"><br/><br/>
用戶名:<input type="text" placeholder="4-16個字符" ng-class="{red:redcheck}" ng-model="newname"><br/><br/>
手機號:<input type="text" ng-class="{red:redcheck}" ng-model="newphone"><br/><br/>
城市:
<select ng-model="newcity">
<option>請選擇</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重慶</option>
</option>
</select><br/><br/>
<div class="b" ng-show="b">
<p>商品名不能爲空!</p>
<p>商品名必須是6-12個字符!</p>
<p>用戶名不能爲空!</p>
<p>用戶名必須是4-16個字符!</p>
<p>手機號不能爲空!</p>
</div>
<button ng-click="tj()">提交</button>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
【網頁】如何下載網頁中mathplayer插件中的pdf文件
1、右鍵網頁——查看網頁源代碼 2、找到源碼中的pdf文件並點擊進去 3、在pdf瀏覽頁面中選中全部頁面：右鍵——答應打印 4、點擊更改 5、點擊另存爲pdf 6、最後再返回點擊保存即可
網頁製作--hover
要求：鼠標浮在某一鏈接時顯示其內容 一、代碼： 二、網頁效果 三、總結 設置行高: line-height:30px; 設置字體間距：word-spacing:15px; 設置首行縮進：line-in