sto*_*ree 12 javascript angularjs angularjs-ng-repeat
我正在尝试使用ng-repeat指令使用对API的角度请求来填充html表.首先加载html页面,然后发出请求以获取返回响应时填充表的数据.当我向ng-repeat指令添加过滤器时,表格被填充并且过滤器起作用,但是在我的chrome浏览器控制台中,我收到以下错误:
错误:[filter:notarray]预期数组但收到:{} http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D 在REGEX_STRING_REGEXP(angular.js:68)处于角度. js:18251 at Scope.fn(app.js:185)at Scope.$ get.Scope.$ digest(angular.js:15683)at Scope.$ get.Scope.$ apply(angular.js:15951)at bootstrapApply (angular.js:1633)在Object.invoke(angular.js:4450)atBootstrap(angular.js:1631)at bootstrap(angular.js:1651)at angularInit(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指令的数据有关,不能立即在页面加载时使用.当我在页面加载时使用json数据替换$ scope.quotes而不是从API请求数据时,不会收到错误.
小智 25
问题出在这个任务上:
$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 () {
}
);
小智 7
$scope.quotes = quoteRepository.getQuoteList().$promise.then(
任务没用.只需$scope.quotes = 从行中删除就可以解决您的问题.
promise.then返回一个对重复语句无用的对象.
| 归档时间： |
|
| 查看次数： |
29079 次 |
| 最近记录： |