您的位置：首页 > Web前端 > AngularJS

AngularJS一筛选，添加、过滤

2017-10-26 08:35 351 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse: collapse;
}
td,th{
padding: 10px;
border: 1px solid #000;
text-align: center;
}
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function($scope){
$scope.data=[{
id:1,
name:"zs",
age:"20",
date:"1508927457128"
},{
id:2,
name:"ls",
age:"24",
date:"1506927457128"
},{
id:3,
name:"ww",
age:"30",
date:"1488927457128"
}];
$scope.add=function(){
console.log(0);
$scope.data.push({
id:$scope.data.length+1,
name:$scope.name,
age:$scope.age,
date:new Date()*1
});
};

//变成时间戳的方法
// var str = '2017/10/25';
// //str = str.replace(/-/g,'/');
// var date = new Date(str);
// var time = date.getTime();
// console.log(time);
$scope.month1="--开始月份--";
$scope.month2="--结束月份--";
$scope.filt=function(item){
//return false;
if($scope.month1!="--开始月份--"&&$scope.month2!="--结束月份--"){
if(parseInt($scope.month1)>parseInt($scope.month2)){
alert("选错了")
}else{
console.log("过滤");
var str1="2017/"+$scope.month1+"/01";
$scope.time1=new Date(str1).getTime();
var str2="2017/"+(parseInt($scope.month2)+1)+"/01";
$scope.time2=new Date(str2).getTime();
if(item.date<$scope.time1||item.date>=$scope.time2){
return false;
}else{
return true;
}
};

}else{
return true;
}
};
//排序
$scope.sortColumn="id";
$scope.revers=false;
$scope.sort=function(column){
//console.log(column);
if($scope.sortColumn==column){
$scope.revers=!$scope.revers;
}
$scope.sortColumn=column;
}
})
</script>
<script src="../ionic/shop/shop/0755116074909/js/app.js"></script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>按时间搜索</span>
<select ng-model="month1">
<option>--开始月份--</option>
<option>1</option>
<option>2</option>
&
4000
lt;option>3</option>
<option>4</option>
<option>5</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select ng-model="month2">
<option>--结束月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<table>
<thead>
<tr>
<th ng-click="sort('id')">序号</th>
<th>姓名</th>
<th>年龄</th>
<th ng-click="sort('data')">时间</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:filt|orderBy:sortColumn:revers">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.date|date:"yyyy-MM-dd hh时mm分ss秒"}}</td>
</tr>
</tbody>
</table>
<h2>添加新项目</h2>
<table>
<thead>
<tr>
<td>姓名</td>
<td><input type="text" ng-model="name"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" ng-model="age"></td>
</tr>
<tr>
<td colspan="2"><button ng-click="add()">按钮</button></td>
</tr>
</thead>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航