我很困惑为什么ng repeat没有显示搜索结果。工作原理:
-
发出HTTPGET请求以从数据库中获取所有数据,然后ng-reeat显示结果。
-
使用
searchterm
发出HTTP GET请求,从数据库中获取部分数据,然后ng repeat显示结果,$scope.searchterm = "acme";
在控制器中设置searchterm
。 -
我在模板中的搜索框将
searchterm
发送到控制器,在那里我可以在console.log中看到它,然后HTTP GET请求发出,返回正确的数据,我也可以在console.log中看到。
不起作用的是使用ng repeat在模板中显示搜索结果数据。
这是我的HTML模板:
<div ng-controller="HomeController">
<form>
<label>Search: <input type="text" ng-model="searchterm" /></label><br />
<input type="submit" ng-click="search(searchterm)" value="Search" />
</form>
</div>
<div ng-repeat="network_operator in network_operators">
<span>{{network_operator.name}}</span><br />
</div>
这是我的控制器:
app.controller('HomeController', ['$scope', '$http', function($scope, $http){
console.log("Home controller.");
// This code displays all of the data, using ng-repeat in the template
// $http.get('http://qualifynow.herokuapp.com/products?searchstring=').then(function(response) {
// $scope.network_operators = response.data.products;
// console.log($scope.network_operators);
// }, function(response) {
// console.log("Error, no data returned.");
// });
// This works instead in place of the next line, the search results display with ng-repeat
// $scope.searchterm = "acme";
$scope.search = function(searchterm) { // This is the line that kills the ng-repeat
console.log($scope.searchterm); // This works, the search term is passed to the controller
$http.get('http://qualifynow.herokuapp.com/products?searchstring=supplier:' + $scope.searchterm).then(function(response) {
$scope.network_operators = response.data.products;
console.log($scope.network_operators); // The correct search results are logged
console.log($scope.network_operators[0].name); // The correct name is logged
}, function(response) {
console.log("Error, no data returned.");
});
};
}]);
我尝试运行$scope.apply()
,但这导致了一条错误消息,即$digest
已经在运行。
$scope.search
函数是否正在创建新的$scope
?也就是说,当ng-repeat
试图在旧的$scope
中查找数据时,我的数据是否愉快地驻留在新的$scope
中?
我尝试了ng-submit
而不是ng-click
,结果是一样的。
我试着做了一个过滤器,效果很好,但对于大型数据库,将所有数据放在$scope
上,然后过滤以获得搜索结果是没有意义的。只获取用户想要的数据会更快。
在HTML中,显示搜索的部分不在控制器的范围内。
所以你应该这样做:
<div ng-controller="HomeController">
<form>
<label>Search: <input type="text" ng-model="searchterm" /></label><br />
<input type="submit" ng-click="search(searchterm)" value="Search" />
</form>
<div ng-repeat="network_operator in network_operators">
<span>{{network_operator.name}}</span><br />
</div>
</div>
这将在控制器的范围内进行搜索。
您的控制器是有限的。将你的结果块(ng重复块)放入控制器中。