极客观点
项目管理
HarmonyOS
<!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>
你
controller中的fileName需要指定一个初始值，ng-selected 只是作用于视图的选中状态指令。引用官方文档的说明给你做参考
关于这个指令的说明
关于这个指令和
ngModel的说明解决方法
增加一个 ng-init 指令来初始化 fileName 的值
在 controller 中初始化 fileName 的值
推荐第二种，因为视图层尽量减少vm的赋值逻辑，解耦。