Feeling lost as to why my web page isn't displaying anything using ng-repeat with template.
Take a look at this image showcasing the data
Here is a snapshot of my console.log output featuring an array of objects
Can't figure out why it's not showing up on the webpage!
Devices: Array[17]
0 : Object
Aid : "....."
...
1 : Object
Angular controller with function
(function () {
'use strict';
angular.module('app').controller('DeviceController', DeviceController);
function DeviceController($http){
var vm = this;
var dataService = $http;
//dataService.get("/api/Product")
vm.devices = [];
deviceList();
function deviceList() {
dataService.get("http://localhost:42822/api/device")
.then(function (result) {
vm.devices = result.data;
//debugger;
console.log(vm.devices);
},
function (error) {
handleException(error);
});
}
function handleException(error) {
alert(error.data.ExceptionMessage);
}
}
})();
HTML
<html>
<head> </head>
<body>
<div ng-app="app" ng-controller="DeviceController as vm">
<div>test</div><br>
<table>
<tbody>
<tr ng-repeat="device in vm.devices">
<td>{{device.Aid}}</td>
<td>{{device.DeviceId}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<!--<script src="~/Scripts/angular.min.js"></script>-->
<script src="./app/app.module.js"></script>
<script src="./app/device.controller.js"></script>
</html>
Still puzzled as to why the content won't display on the webpage!