-
夏目2020-01-20 00:00
- 35
- 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 700px;
text-align: center;
margin: 100px auto;
}
</style>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./libs/angular.min.js"></script>
<script>
// 实例化一个应用,没有依赖相关
var app = angular.module("app", []);
app.controller("appController", ["$scope", "$filter", function($scope, $filter) {
// 模拟数据
$scope.list = [{
username: "朱雀",
sex: "男",
weixin: "11",
momo: "99991111",
tantan: "88811122",
baihe: "老布头",
youyuan: "老头"
}, {
username: "刘小强",
sex: "男",
weixin: "33",
momo: "99991111",
tantan: "88811122",
baihe: "西门庆",
youyuan: "西门庆"
}, {
username: "玄武",
sex: "男",
weixin: "66",
momo: "99991111",
tantan: "88811122",
baihe: "没毛病",
youyuan: "没毛病"
}, {
username: "凤凰",
sex: "男",
weixin: "88",
momo: "99991111",
tantan: "88811122",
baihe: "小旋风",
youyuan: "小旋风"
}];
$scope.persons = $scope.list;
// 注册一个搜索事件
$scope.search = function() {
$scope.persons = $scope.list;
// 思路:我们要进行搜索，可以通过过滤器进行搜索。
// 搜索到结果后将搜索的结果赋值给 $scope.persons,让其自动更新视图
// 通过过滤器进行搜索查询，如何使用过滤器呢，
// 把过滤器的整个对象给传递过来， 整个对象是angular提供的$filter
// 通过js的操作，可以实现调用过滤器的方法
// 值的注意的是:$filter包含九大过滤器 data currency date orderBy limitTo....
// console.log($filter("filter"))
var func = $filter("filter");
//func是用来过滤数据的 ，第一个参数是要过滤的数据 第二个参数是要过滤的条件{name="张三"}
var obj = {};
obj[$scope.fileName] = $scope.fileValue;
var result = func($scope.persons, obj);
console.log(obj);
$scope.persons = result;
};
// 绑定排序方法：
var isorderBy = false;
$scope.orderBy = function(fileNames) {
isorderBy = !isorderBy;
$scope.persons = $filter("orderBy")($scope.persons, fileNames, isorderBy);
}
}])
</script></head>
<body ng-app="app" ng-controller="appController">
<div class="box">
<select class="form-control" style="width:300px; float:left;" ng-model="fileName">
<!-- <option value="">--------------------请选择----------------------</option> -->
<option value="username" ng-selected="true" ng-selected="true" value="">姓名</option>
<option value="sex">年龄</option>
<option value="weixin">微信</option>
<option value="momo">陌陌</option>
<option value="tantan" >探探</option>
<option value="baihe">百合网</option>
<option value="youyuan">有缘网</option>
</select>
<input type="text" name="" class="form-control" style="width:300px; float:left;" value="" ng-model="fileValue" ng-keyup="search()">
<table class="table table-bordered">
<tr>
<td ng-click="orderBy('username')">姓名</td>
<td ng-click="orderBy('sex')">年龄</td>
<td ng-click="orderBy('weixin')">微信</td>
<td ng-click="orderBy('momo')">陌陌</td>
<td ng-click="orderBy('tantan')">探探</td>
<td ng-click="orderBy('baihe')">百合网</td>
<td ng-click="orderBy('youyuan')">有缘网</td>
</tr>
<tr ng-repeat="item in persons">
<td>{{item.username}}</td>
<td>{{item.sex}}</td>
<td>{{item.weixin}}</td>
<td>{{item.momo}}</td>
<td>{{item.tantan}}</td>
<td>{{item.baihe}}</td>
<td>{{item.youyuan}}</td>
</tr>
</table>
</div></body>
</html>
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部