我正在尝试使用ng-reeat指令，使用对API的角度请求来填充html表。html页面首先加载，然后请求获取在返回响应时填充表的数据。当我向ng repeat指令添加过滤器时，表会被填充，过滤器也会起作用，但在我的chrome浏览器控制台中，我会收到以下错误：
错误：[filter:notarray]应为数组，但收到的却是：｛｝http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D在REGEXSTRING_REGEXP(角度.js:68(角度js:18251在Object.fn(app.js:185(范围内$收到范围$摘要(angular.js:15683(范围内$收到范围$应用(angular.js:15951(在bootstrapApply(angular.js:1633(在Object.invoke(angular.js:4450(在doBootstrap(angular.js:1631(在bootstrap(angular.js:1651(角度单位(angular.js:1545(
我在plunker上设置了一个样本，当样本运行时，错误也显示在控制台中：
http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj?
html:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
<script data-require="angular-resource@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script>
<script type="text/javascript" src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" />
</head>
<body ng-app="inventoryManagerApp">
<h3>Sample - Expected array error</h3> Filter
<input type="text" id="quoteListFilter" class="form-control" ng- model="search" />
<div ng-controller="QuoteController">
<table class="table table-bordered">
<tbody>
<tr>
<th>Specification</th>
<th>Quantity</th>
</tr>
<tr ng-repeat="quote in quotes | filter:search">
<td>{{quote.SpecificationDetails}}</td>
<td>{{quote.Quantity}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
javascript：
var inventoryManagerApp = angular.module('inventoryManagerApp', [
'ngResource',
'quoteControllers'
]);
var quoteControllers = angular.module('quoteControllers', []);
quoteControllers.controller("QuoteController", ['$scope', 'filterFilter', 'quoteRepository',
function($scope, filterFilter, quoteRepository) {
$scope.quotes = quoteRepository.getQuoteList().$promise.then(
function (result) {
$scope.quotes = result;
},
function () {
}
);
}
]);
inventoryManagerApp.factory('quoteRepository',
function($resource) {
return {
getQuoteList: function() {
return $resource('http://drbsample.azurewebsites.net/api/Quotes').query();
}
};
});
这似乎与填充ng repeat指令的数据有关，该指令在页面加载时不立即可用。当我在页面加载中将$scope.quotes替换为json数据而不是从API请求数据时，不会得到错误。
问题出在这个赋值上：
$scope.quotes = quoteRepository.getQuoteList().$promise.then(
function (result) {
$scope.quotes = result;
},
function () {
}
);
函数.then()返回另一个允许链接的promise对象：.then().then()，因为它返回了一个对象，这就是接收notarray错误的原因。
为了避免引用错误，您可以提前将$scope.quotes指定为空arrray，然后将结果分配给它。
$scope.quotes = [];
quoteRepository.getQuoteList().$promise.then(
function (result) {
$scope.quotes = result;
},
function () {
}
);
$scope.quotes = quoteRepository.getQuoteList().$promise.then(
这项任务毫无用处。只需从行中删除$scope.quotes =就可以解决您的问题。
promise.then返回一个对repeat语句无效的对象。
$http遗留promise方法.success和.error已被弃用，并将在Angular v1.6.0中删除。请改用标准的.then方法。
Now.then方法返回包含几个元素的对象：数据、状态等。因此，您需要使用response.data而不仅仅是response:
$http.get('https://example.org/...')
.then(function (response) {
console.log(response);
var data = response.data;
var status = response.status;
var statusText = response.statusText;
var headers = response.headers;
var config = response.config;
console.log(data);
});
quoteRepository.getQuoteList().then(
function (result) {
$scope.quotes = result;
},
function () {
}
);