我能够从G-sheet获取数据并显示,但我的要求是也要显示工作表名称和超链接。工作表名称不应通过搜索进行过滤,它应始终仅显示应过滤的数据
来自JSON订阅源UEL的超链接单元格数据信息就像“ gsx $ topic”:{“ $ t”:“全球受众覆盖率数字”},“ gsx $ response”:{“ $ t”:“ Verizon Media全球产品投资组合工具包(内部备忘单)“},” gsx $ _cre1l“:{” $ t“:” https://docs.google.com/spreadsheets/d/10tz7wQFG7OIMZgI59SnUF3ER
标题信息存储在JSON feed URL中,如下所示。“ title”:{“ type”:“ text”,“ $ t”:“ Data”}
you can find my sample code below
<div ng-app="sample" ng-controller="sampleController">
<div class="black">
<input type="text" name="search" ng-model="search"
placeholder="search" ng-click="didSelectLanguage()"/>
</div>
<br>
<br>
<br>
<table style="border: 1px solid black ;">
<tbody>
<tr>
<td><center><b>Question</b></center></td>
<td ><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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('sample', []).
controller('sampleController', ['$scope', '$http', function ($scope, $http) {
var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/1/public/values?alt=json";
// var url2 = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/2/public/values?alt=json";
$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");
});
$scope.search='';
$scope.searchFilter=function(item){
if(item.gsx$topic.$t.indexOf($scope.search) != -1 || item.gsx$response.$t.indexOf($scope.search) != -1){
return true;
}
return false;
}
}]);
</script>
您的searchFilter()
函数仅在gsx$topic.$t
和gsx$response.$t
属性中搜索,因此,现在,您需要在以下位置显示title
和hiperlink(link
)属性您的看法。
然后,在您的代码中,使用:
user.link[0].href
显示链接。user.title.$t
显示标题。类似这样的东西:
(function() {
angular.module('sample', []).
controller('sampleController', ['$scope', '$http', function($scope, $http) {
var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json";
$http.get(url)
.success(function(data, status, headers, config) {
$scope.users = data.feed.entry;
})
.error(function(error, status, headers, config) {
console.log(status);
console.log("Error occured");
});
$scope.search = '';
$scope.searchFilter = function(item) {
if (item.gsx$topic.$t.indexOf($scope.search) != -1 || item.gsx$response.$t.indexOf($scope.search) != -1) {
return true;
}
return false;
}
}]);
}());
.view,
.view tbody td {
border: #b9b9b9 solid 1px;
}
.view thead th {
border-style: none;
font-weight: bold;
text-align: center;
}
.view tbody td {
white-space: pre-wrap;
}
.view. thead th.title {
width: 10%;
}
.view thead th.question {
width: 20%;
}
.view thead th.response {
width: 70%;
}
<div ng-app="sample" ng-controller="sampleController">
<div class="black">
<input type="text" name="search" ng-model="search" placeholder="search" ng-click="didSelectLanguage()" />
</div>
<br>
<br>
<br>
<table class="view">
<thead>
<tr>
<th class="title">Title</th>
<th class="question">Question</th>
<th class="response">Response</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:searchFilter">
<td><a href="{{user.link[0].href}}" title="{{user.link[0].href}}">{{user.title.$t}}</a></td>
<td>{{user.gsx$topic.$t}}</td>
<td>{{user.gsx$response.$t}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>