AngularJS 查询、添加、删除、全选、反选、点击排序

来源：互联网发布：守望先锋最新英雄数据编辑：程序博客网时间：2024/05/18 15:56

<!DOCTYPE html>
<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 src="../angular-1.5.5/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="请选择";
$scope.tj=function () {

if($scope.newsname==""|| $scope.newsname.length<6 || $scope.newsname.length>20 || $scope.newname.length<4 || $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:"",zhuai:"发货"})
}
}
})
</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>

阅读全文

0 0