【发布时间】：2020-05-11 11:46:19
【问题描述】：
// 我的 ng-repeat 可以正常显示结果，但是在搜索框中输入后，它并没有按照搜索过滤结果。请帮忙。另外，我从 http.get 获取数据 // 我是 Angular js 的新手，你能帮忙在搜索框中不输入任何内容时如何重复搜索结果并不显示任何内容。 // 我使用了 ng-show 这最初有助于停止显示 主题和响应是我在工作表中的列标题
<html>
<head>
<script src="menu.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
// Json file : https://spreadsheets.google.com/feeds/worksheets/1OJX_UfZ7KQ-NMKcpXmYT8Ml1OfzerPnmUyEcSoMqeZc/public/basic?alt=json
// code for displaying the data in tabs
// Json file : https://spreadsheets.google.com/feeds/worksheets/1OJX_UfZ7KQ-NMKcpXmYT8Ml1OfzerPnmUyEcSoMqeZc/public/basic?alt=json
function openPage(pageName,elmnt) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.color = "#969595";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.color = "white";
}
//angular js code to display search in JSON URL data
var app= angular.module('sample', []);
app.controller('sampleController', function ($scope, $http) {
var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json";
//var url1 = "https://spreadsheets.google.com/feeds/list/1OJX_UfZ7KQ-NMKcpXmYT8Ml1OfzerPnmUyEcSoMqeZc/2/public/values?alt=json";
//var url2 = "https://spreadsheets.google.com/feeds/list/1OJX_UfZ7KQ-NMKcpXmYT8Ml1OfzerPnmUyEcSoMqeZc/3/public/values?alt=json";
//var url = "https://spreadsheets.google.com/feeds/cells/1OJX_UfZ7KQ-NMKcpXmYT8Ml1OfzerPnmUyEcSoMqeZc/1/public/values?alt=json"; // url for sheet1
$http.get(url)
.success(function(data, status, headers, config) {
$scope.users = data.feed.entry;
//console.log($scope.users);
})
.error(function(error, status, headers, config) {
console.log(status);
console.log("Error occured");
});
app.filter('highlightFilter', $sce =>
function (element, searchInput) {
element = element.replace(new RegExp(`(${searchInput})`, 'gi'),
'<span class="highlighted">$&</span>');
return $sce.trustAsHtml(element);
});
$scope.search='';
$scope.searchFilter=function(item){
if(item.gsx$topic.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$response.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1){
// code to highlight
// code to highlight
return true;
}
return false;
}
});
</script>
</head>
<body>
<div ng-app="sample" ng-controller="sampleController">
<input type="text" name="search" ng-model="search" placeholder="Search in all sheets" ></input>
<br>
<br>
<table style="border: 1px solid black ;" >
<tbody>
<tr>
<td style="color:blue; font-size:14px;"><center><b>Question</b></center></td>
<td style="color:blue; font-size:14px;"><center><b>Response</b></center></td>
</tr>
<tr ng-repeat="user in users | filter:searchFilter">
<td style="border: 1px solid black ; width:30%;white-space: pre-wrap;">{{user.gsx$topic.$t}}</td>
<td style="border: 1px solid black ; width:70%;white-space: pre-wrap;">{{user.gsx$response.$t}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
【问题讨论】：
-
我可以在您的搜索输入框的 ng-model 中看到一个 $。请删除它并尝试
-
嗨 Risalat，我已经尝试过了，但没有成功。你能提出任何建议吗
-
谁能帮忙突出显示黄色高亮的搜索词
标签： html angularjs google-sheets angularjs-scope angularjs-ng-repeat