我的ng-repeat很好地显示了结果,但是在搜索框中键入后,它没有按照搜索结果过滤结果。请帮忙。另外,我从http.get获取数据我是angular js的新手,如果您在搜索框中不输入任何内容,便能帮助您重复搜索结果而什么也不显示。我使用ng-show可以帮助最初停止显示主题和响应是我在工作表中的列标题
<html>
<head>
<style>
* {
box-sizing: border-box;
}
html,
body {
}
input {
font-size: 14px;
border-radius: 5px;
font-size: 12px;
height: 40px;
background-color:#1C1B1B;
color: white;
font-weight: Bold;
position: absolute;
width: 50%;
}
input:focus {
outline: none;
}
.black {
padding: 60px;
background: black;
}
* {
margin: 0;
padding: 0;
}
input:focus {
outline: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var data;
//以下是从中获取数据的URL//从Json URL获取数据:https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json
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";
$http.get(url)
.success(function(data, status, headers, config) {
$scope.users = data.feed.entry;
//alert($scope.users);
})
.error(function(error, status, headers, config) {
console.log(status);
console.log("Error occured");
});
});
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.$parent.users = data.feed.entry;
//alert($scope.users);
})
.error(function(error, status, headers, config) {
console.log(status);
console.log("Error occured");
});
}]);
<div ng-app="sample" ng-controller="sampleController">
<div class="black">
<input type="text" name="search" ng-model="search.$"
placeholder="search" ng-click="didSelectLanguage()"></input>
</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:search">
<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>
如果要在$ scope.users的单个字段上添加搜索过滤器,则必须从json指定该属性
<div ng-repeat="user in users | filter: { gsx$topic.$t : search}">
也请更新模态输入为:
<input type="text" name="search" ng-model="search" placeholder="search" ng-click="didSelectLanguage()"></input>