मैं एनजी-दोहराना निर्देश का उपयोग करके एक एपीआई को कोणीय अनुरोध का उपयोग करके एक HTML तालिका पॉप्युलेट करने का प्रयास कर रहा हूं। एचटीएमएल पेज पहले लोड होता है तो अनुरोध डेटा लौटने के लिए अनुरोध किया जाता है जो प्रतिक्रिया लौटाते समय टेबल भरता है। जब मैं, एनजी-दोहराने निर्देश तालिका से भर जाता है और फिल्टर कार्यों के लिए एक फ़िल्टर जोड़ें हालांकि मेरी क्रोम ब्राउज़र कंसोल में मैं निम्नलिखित त्रुटि मिलती है:कोणीय त्रुटि: [फ़िल्टर: नोटरायरे] अपेक्षित सरणी लेकिन प्राप्त: {} एक एनजी-दोहराने पर फ़िल्टर के साथ
Error: [filter:notarray] Expected array but received: {} http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D at REGEX_STRING_REGEXP (angular.js:68) at angular.js:18251 at Object.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) at Object.invoke (angular.js:4450) at doBootstrap (angular.js:1631) at bootstrap (angular.js:1651) at angularInit (angular.js:1545)
मैं plunker पर एक नमूना की स्थापना की है, नमूना चलाने पर कंसोल में त्रुटि भी प्रदर्शित होती है:
http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj?
एचटीएमएल:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
<script data-require="[email protected]*" 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>
जावास्क्रिप्ट:
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();
}
};
});
यह डेटा के साथ क्या करना एनजी-दोहराने के निर्देश पृष्ठ लोड पर तत्काल उपलब्ध नहीं किया जा रहा है को भरने के लिए कुछ हो रहा है। जब मैं एपीआई से डेटा का अनुरोध करने के बजाय पेज लोड पर जेसन डेटा के साथ $ scope.quotes को प्रतिस्थापित करता हूं तो त्रुटि नहीं मिलती है।