AngularJS各搜索,排序
来源:互联网 发布:matlab 优化 线性规划 编辑:程序博客网 时间:2024/06/06 20:11
<!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 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 (index) {
//获得开始和结束月份
//获取当前订单的时间月份
var time = $scope.data[index].time;
var month = parseInt(time.split("-")[0]);
if($scope.kai == "开始月份" || $scope.jie == "结束月份"){
return true;
}else{
var start = parseInt($scope.kai);
var end = parseInt($scope.jie);
if(month >=start && month<=end ){
return true;
}else{
return false;
}
}
}
//添加新客户
$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">
<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" ng-if="pan($index)">
<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
- AngularJS各搜索,排序
- AngularJS搜索,排序,入库,删除
- angularjs的过滤器实现搜索与排序
- angularJS实现增删搜索排序功能
- angularjs搜索
- angularjs 排序
- angularjs排序
- AngularJS排序
- AngularJS 排序
- angularjs 下拉搜索框
- AngularJs下拉搜索框
- Solr+AngularJS+springMVC+搜索
- angularjs添加和搜索
- AngularJS 的小demo——表头排序+表格搜索(过滤器)
- AngularJS 的小demo——表头排序+表格搜索(过滤器)
- 采用JavaScript、AngularJS实现过滤器搜索、删除、添加、排序、常用过滤器
- angularjs 排序入门学习
- 【AngularJS】表头排序
- 【kruskal裸题】 POJ
- OGNL表达式
- Linux中软硬链接的区别
- CK2359-vue2.0+node.js+MongoDB全栈打造商城
- Greendao+多线程断点续传
- AngularJS各搜索,排序
- python3射线法判断点是否在多边形内
- 临时表查询
- ViewPager+Fragment取消预加载
- K近邻(KNN)算法
- winform .exe程序打包修改注册表使其可通过网页触发启动并传入参数
- 蓝牙BT射频测试
- 详解Java中的时区类TimeZone的用法
- eclipse连接MySQL数据库