我想用ng-model = search1框过滤ng-model = search的结果 对于ng-model = search，我为所有列添加了过滤器。 寻找另一个文本框过滤器以进一步过滤结果。
第二个过滤器应应用于第一个过滤的数据。我希望有3到4个文本框来一个接一个地过滤数据。
<style>
h4
{
color:#6600ff;
}
.foundText {
background-color: #ff0;
color: #f00;
}
/*Menu style*/
.tablink
{
color: #969595;
}
#sse1
{
/*You can decorate the menu's container, such as adding background images through this block*/
background-color: black;
height: 18px;
padding: 10px;
border-radius: 3px;
box-sizing: content-box;
width:100%;
}
#sses1
{
margin:20;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
width:100%;
background-color: black;
}
#sses1 ul
{
position: relative;
list-style-type: none;
float:left;
padding:0;margin:0;
border-bottom:solid 0px #6C0000;
background-color: black;
}
#sses1 li
{
float:left;
list-style-type: none;
padding:0;margin:0;background-image:none;
}
/*CSS for background bubble*/
#sses1 li.highlight
{
background-color:#DC143C;
top:26px;
height:3px;
z-index: 1;
position: absolute;
overflow:hidden;
}
#sses1 li a
{
box-sizing: content-box;
height:20px;
padding-top: 8px;
margin: 0 10px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
font: Bold 12px arial;
text-align: center;
text-decoration: none;
float: left;
display: block;
position: relative;
z-index: 2;
}
/*Menu style*/
div {
display: flex;
flex-wrap: wrap;
}
input {
border-radius: 4px;
border:solid black 1px;
margin-top:30px;
margin-left: 50px;
width:40%;
height:0px;
}
input[type="text"]
{
font-size:18px;
padding: 25px;
}
.black {
background: black;
height: 160px;
width:100%;
}
body {
margin: 0;
padding: 0;
font: 13px arial;
}
::placeholder {
color:#808080;
font-family:Geneva;
font-size:16px
}
.r
{
position: absolute;
margin:40px;
right: 180px;
color: white;
font-family: Geneva;
margin-right: 10px;
}
.i
{
position: absolute;
margin:40px;
right: 9px;
color: white;
font-family: Arial;
font-size: 24px;
margin-right: 20;
}
.b
{
opacity: 0%;
}
table{
display:table;
width:1000%;
table-layout:fixed;
}
td{
display:table-cell;
width:300px;
word-wrap: break-word;
border:solid black 1px;
}
img
{
width:30%;
border:solid Red 2px;
}
</style><html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app= angular.module('sample', []);
app.controller('sampleController', function ($scope,$http, $sce) {
var url="https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/1/public/values?alt=json&callback=JSON_CALLBACK";
// var proxy = "//cors-anywhere.herokuapp.com";
$http.jsonp(url)
.success(function(data, status, headers, config) {
$scope.users1 = data.feed;
//console.log($scope.users);
})
.error(function(error, status, headers, config) {
console.log(status);
console.log("Error occured");
});
var url1=url;
$http.jsonp(url1)
.success(function(data, status, headers, config) {
$scope.users2 = data.feed.entry;
//console.log($scope.users);
})
.error(function(error, status, headers, config) {
console.log(status);
console.log("Error occured");
});
// code to highlight
$scope.highlightText = function(text, search) {
if (search && search.length === 0) {
// Returns the default content.
return $sce.trustAsHtml(text);
}
// Define a regular expression to find the text globally and ignoring capital letters.
var regex = new RegExp(search, 'gi');
var urls = /(\b(https?|ftp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim;
var emails = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
if(text.match("https://s.yimg.com") || text.match("http://l.yimg.com"))
{
// to replace all url with hyperlink
text=text.replace(regex, '<span class="foundText">$&</span>');
text=text.replace(urls, "<img src=\"$1\" target=\"_blank\"></img>");
return $sce.trustAsHtml(text);
}
/*if(text.match(emails)) {
// to replace all email alias with hyperlink
return $sce.trustAsHtml(text.replace(emails, "<a href=\"mailto:$1\" target=\"_blank\">$1</a>"));
}*/
// If you already found the text then inject a span element with CSS class to highlight that you found.
text=text.replace(regex, '<span class="foundText">$&</span>');
return $sce.trustAsHtml(text);
};
// code to highlight
$scope.search='';
$scope.searchFilter=function(item){
if(item.gsx$a.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$b.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$c.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$d.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$e.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$f.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$g.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$h.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$i.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$j.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$k.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$l.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$m.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$n.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$o.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$p.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$q.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$r.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$s.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$t.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$u.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$v.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1|| item.gsx$w.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$x.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$y.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$z.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1){
return true;
}
return false;
}
});
</script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.9/angular-sanitize.js"></script>
<div ng-app="sample" ng-controller="sampleController">
<input type="text" name="search" ng-model="search" ng-keyup="highlight()" placeholder="0" ></input>
<input type="text" name="search" ng-model="search1" ng-keyup="highlight()" placeholder="1"></input>
<h4 ng-show="(users1.entry | filter:searchFilter).length>0">{{users1.title.$t}}</h4>
<div ng-repeat="user in users1.entry | filter:searchFilter">
<table>
<tr>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$a.$t, search)" ></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$b.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$c.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$d.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$e.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$f.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$g.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$h.$t, search)" ></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$i.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$j.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$k.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$l.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$m.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$n.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$o.$t, search)" ></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$p.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$q.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$r.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$s.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$t.$t, search)"></td>
<td style="border: 1px solid black ; white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$u.$t, search)"></td>
</tr>
</table>
</div>
</div>
</body>
</html>