Angular - data returned, but ng-repeat doesn't display it
I have a problem, but although my Angular JS is returning data from my backend, I cannot get the ng-repeat to render it. Here is my HTML file:
<!DOCTYPE html>
<html ng-app="docManager">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="DocManCtrl as docs">
<div>
<input placeholder="Search" type="text" ng-model="searchKey" />
</div>
<table class="table">
<tr><th>Document ID</th><th>Filename</th><th>Category</th></tr>
<tr ng-repeat="document in docs.documents | filter:searchKey">
<td>{{document.id}}</td>
<td>{{document.filename}}</td>
<td>{{document.category}}</td>
</tr>
</table>
<button ng-click="docs.add()">Add Document</button>
</body>
And here is my JS file:
var app = angular.module('docManager', []);
app.controller('DocManCtrl', DocManCtrl);
function DocManCtrl($http){
$http.get('http://localhost:3000/documents').success(function(data){
this.documents = data;
console.log('Data retrieved.');
}).error(function(){
console.log('Error: could not GET documents');
});
}
DocManCtrl.prototype.add = function(){
console.log('Hello, world.');
};
I know my $ http.get is working because if I print the contents of the "data" to the console, I can see the data from my database. Does anyone know where my mistake is?
Thank! Bryan
+3
source to share
2 answers
var app = angular.module('docManager', []);
app.controller('DocManCtrl', DocManCtrl);
function DocManCtrl($http){
var vm = this;
$http.get('http://localhost:3000/documents').success(function(data){
vm.documents = data;
console.log('Data retrieved.');
}).error(function(){
console.log('Error: could not GET documents');
});
}
DocManCtrl.prototype.add = function(){
console.log('Hello, world.');
};
+1
source to share