ng-repeat doesn't show rows - javascript

I am trying to learn AngularJS and started my first code sample to get github repos of a user.
My html page is like this:
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="gitHubRepoController">
{{error}}
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Full Name</th>
<th>HTML Url</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos">
<td>{{repo.name}}</td>
<td>{{repo.full_name}}</td>
<td>{{repo.html_url}}</td>
<td>{{repo.description}}</td>
</tr>
</tbody>
</table>
</body>
</html>
and my controller is like this
(function() {
var app = angular.module("githubViewer",[]);
var gitHubRepoController = function($scope, $http){
$http.get("https://api.github.com/users/lakshman553/repos")
.then(onDataDownloaded, onError);
var onDataDownloaded = function(response) {
console.log(response.data);
$scope.repos = response.data;
};
$scope.error = "some value";
var onError = function(reason) {
$scope.error = reason;
};
};
app.controller("gitHubRepoController",gitHubRepoController);
})();
AngularJS is loaded as it is showing the {{error}} is being shown on the screen as some value
the table header is properly loaded but nothing else is shown. Even the url is returning data when seen in broswer.
There are no errors in the console also.
Where am i going wrong?


You need to move the declaration of your promise handlers (onDataDownloaded, onErro) to before you try to use them. Plnkr
(function() {
console.log('this is the app')
var app = angular.module("githubViewer",[]);
var gitHubRepoController = function($scope, $http){
var onDataDownloaded = function(response) {
$scope.repos = response.data;
};
var onError = function(reason) {
$scope.error = reason;
};
$http.get("https://api.github.com/users/lakshman553/repos")
.then(onDataDownloaded, onError);
};
app.controller("gitHubRepoController",gitHubRepoController);
})();


Problem is with your controller.
Your HTML:
<body ng-controller="CustomersController">
{{error}}
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Full Name</th>
<th>HTML Url</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos">
<td>{{repo.name}}</td>
<td>{{repo.full_name}}</td>
<td>{{repo.html_url}}</td>
<td>{{repo.description}}</td>
</tr>
</tbody>
</table>
</body>
HTML should be:
<body ng-controller="gitHubRepoController">
{{error}}
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Full Name</th>
<th>HTML Url</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos">
<td>{{repo.name}}</td>
<td>{{repo.full_name}}</td>
<td>{{repo.html_url}}</td>
<td>{{repo.description}}</td>
</tr>
</tbody>
</table>
</body>
JS:
(function() {
var app = angular.module("githubViewer",[]);
var gitHubRepoController = function($scope, $http){
var onDataDownloaded = function(response) {
console.log(response.data);
$scope.repos = response.data;
};
$scope.error = "some value";
var onError = function(reason) {
$scope.error = reason;
};
$http.get("https://api.github.com/users/lakshman553/repos")
.then(onDataDownloaded, onError);
};
app.controller("gitHubRepoController",gitHubRepoController);
})();
You have given the controller as ng-controller="CustomersController" which is wrong. If you checked the console it shows you the error clearly.
Hope this will help you.

Related

Adding Grand Total In Angular Js Application by using Wcf Service

I am new to Angular JS .I have an Wcf Rest Service to get all the records from the database and its is working but i am trying to add the grand total at the bottom of the page but i can not do it . insated of showing grand totla its showing the text message . I am trying to add the amount Clomun..
Here is my script code ..
var app = angular.module("WebClientModule", [])
.controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {
$scope.OperType = 1;
$scope.Account_Number = "";
$scope.Account_Holder_Name = "";
$scope.Amount = "";
$scope.Sort_Code = "";
$scope.Transcation_Type = "";
$scope.Date = "";
GetAllRecords();
//To Get All Records
function GetAllRecords() {
var promiseGet = myService.getAllStudent();
promiseGet.then(function (pl) { $scope.Users = pl.data },
function (errorPl) {
$log.error('Some Error in Getting Records.', errorPl);
});
}
//$scope.getTotal = function () {
// var total = 0;
// for (var i = 0; i < $scope.cart.Amount.length; i++) {
// var product = $scope.cart.Users[i];
// total += (user.Amount + user.Amount);
// }
// return total;
//}
}]);
app.service("myService", function ($http) {
this.getAllStudent = function () {
return $http.get("http://localhost:52098/HalifaxIISService.svc/GetCreateCurrentAccountDepositList");
}
})
Here is my HTML CODE ..
#{
Layout = null;
}
<!DOCTYPE html>
<html data-ng-app="WebClientModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>TotalDeposit</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/DepositTotal.js"></script>
</head>
<body>
<table ng-init="items.total = {}" id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td>
<table style="border: solid 2px Green; padding: 5px;">
<tr style="height: 30px; background-color: skyblue; color: maroon;">
<th></th>
<th>Account Number</th>
<th>Account Holder Name</th>
<th>Amount</th>
<th>Sort Code</th>
<th>Transcation Type</th>
<th>Date</th>
<th></th>
<th></th>
</tr>
<tbody data-ng-repeat="user in Users">
<tr>
<td></td>
<td><span>{{user.Account_Number}}</span></td>
<td><span>{{user.Account_Holder_Name}}</span></td>
<td><span>{{user.Amount}}</span></td>
<td><span>{{user.Sort_Code}}</span></td>
<td><span>{{user.Transcation_Type}}</span></td>
<td><span>{{user.Date}}</span></td>
</tr>
</tbody>
<td ng-init="Users.total.amount = items.total.amount + item.amount">{{user.amount}}</td>
</table>
</td>
</tr>
<tr>
<td>Total</td>
<td>{{items.total.amount}}</td>
</tr>
</table>
</body>
</html>
Here is the screen shot when o run the application.

Create a function to get the grand total something like
$scope.grandTotal= function(){
return $scope.users.reduce(function(a, b){
return a + b.amount;
},0);
}
Then in html
<tr>
<td>Total</td>
<td>{{grandTotal()}}</td>
</tr>
Working demo
reference for array.reduce

table is not binding in angularjs

Hello everyone I am trying to bind a table in angulajs. I am getting data from database in table and trying to fill that table.
Here I did
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Page = data;
console.log($scope.Page);
}).error(function () {
});
}
then i get the data in $scope.Page which is defined as $scope.Page = []; here i am attaching the console image that i am getting data in $scope.page
and here is my table
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
ID
</th>
<th>
PageName
</th>
<th>
PageUrl
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Page in Pages">
<td>{{Page.id}}</td>
<td>{{Page.pageName}}</td>
<td>{{Page.pageUrl}}</td>
<td>
<input type="checkbox" value="Edit" />
</td>
</tr>
</tbody>
</table>
please help where I am missing I will be very thankful to you all.

In your view you are iterating over Pages, but I dont see it defined in your controller.
Change
$scope.Page = data;
to
$scope.Pages = [data];
Final Code
HTML:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
ID
</th>
<th>
PageName
</th>
<th>
PageUrl
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Page in Pages">
<td>{{Page.id}}</td>
<td>{{Page.pageName}}</td>
<td>{{Page.pageUrl}}</td>
<td>
<input type="checkbox" value="Edit" />
</td>
</tr>
</tbody>
</table>
controller:
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Pages = [data];
}).error(function () {
});
}
EDIT: if your data is an object make it an array, so ng-repeat can iterate over it

$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Pages = data; //change page to pages in whole code,
//no need to change any thing in html page
console.log($scope.Pages);
}).error(function () {
});
}

$scope.Page in controller vs Pages in your HTML ng-repeat binding, you need to write $scope.Pages :)

Change $scope.Page = data to $scope.Pages = data.

Angularjs - How can i show my Json that the element retrieve from 2 array?

I'm trying to show the value of my Json element,
"Baru20151","Lama20151","Baru20152","Lama20152",
but i have no idea how to.
The element is retrieve from 2 array,
in "Baru20151" elements, "20151" is retrieved from "isimasa" array in my Json file.
HTML :
<div ng-app="myApp" ng-controller="RegistrationCtrl">
<h4 style="text-align:center">REGISTRASI MAHASISWA PENDAS</h4>
<table class="table table-striped table-bordered table-hover">
<tr>
<td ng-repeat-start="Isimasa in myDataIsimasa" align="center">Baru</td>
<td align="center">Lama</td>
</tr>
<tr ng-repeat="Pendas in DataPendas" >
<td ng-repeat-start="Isimasa in DataIsimasa" align="center">{{Pendas.Baru{{Isimasa.masa}}}}</td>
<td align="center">{{Pendas.Lama{{Isimasa.masa}}}}</td>
</tr>
</table>
</div>
Controller:
<script>
var app = angular.module('myApp', []);
app.controller('RegistrationCtrl', function($scope, $http) {
$http.get("json.json").then(function (response) {
$scope.DataPendas = response.data.pendas;
$scope.DataIsimasa = response.data.isimasa;
$scope.Data = response.data;
});
});
</script>
Json :
{"name":"ACEH",
"isimasa":[{"masa":"20151"},{"masa":"20152"}],
"column":9,
"pendas":[
{"kode":"121","prodiname":"PGPAUD", "Baru20151":22,"Lama20151":0,
"Baru20152":22,"Lama20152":20}
]}

Try this..
Controller:
<script>
var app = angular.module('myApp', []);
app.controller('RegistrationCtrl', function($scope, $http) {
$http.get("json.json").then(function (response) {
$scope.DataPendas = response.data.pendas;
//console.log($scope.DataPendas);
$scope.DataIsimasa = response.data.isimasa;
var isimasa = $scope.DataIsimasa;
console.log(isimasa);
$scope.Data = response.data;
$scope.constructJson = constructJson;
function constructJson(theKey, jsonKey, jsonObj){
console.log(theKey, jsonKey);
var newKey = theKey + jsonKey;
var newValue = jsonObj[newKey];
console.log(newValue);
return newValue;
}
});
});
</script>
HTML:
<div ng-app="myApp" ng-controller="RegistrationCtrl">
REGISTRASI MAHASISWA PENDAS
<table class="table table-striped table-bordered table-hover">
<tr ng-repeat-start="Isimasa in DataIsimasa">
<td>{{Isimasa.masa}}
<div ng-repeat="Pendas in DataPendas">
Baru{{Isimasa.masa}} : {{ constructJson("Baru",Isimasa.masa, Pendas ) }}<br/>
Lama{{Isimasa.masa}} : {{ constructJson("Lama",Isimasa.masa, Pendas ) }}
</div>
</td>
</tr>
<tr ng-repeat-end>
</tr>
</table>

Angular.js smart table loading symbol during ajax call

Using the pipe/ajax plugin example at http://lorenzofox3.github.io/smart-table-website I have been trying to implement an Angular.js smart table with a loading indicator whilst my ajax call is still loading.
angular-boostrap.js
var eposWebAngularStrutsApp = angular.module('eposWebAngularStrutsApp', ['ngResource','smart-table']);
angular-controller.js
eposWebAngularStrutsApp.controller('StoreHealthCheckController', ['$scope','StoreServerHealth', function ($scope, StoreServerHealth) {
//http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/
var ctrl = this;
this.displayed = [];
this.callServer = function callServer(tableState) {
ctrl.isLoading = true;
StoreServerHealth.query(function(result) {
ctrl.displayed = result.data;
ctrl.isLoading = false;
}); //query() returns all the entries
};
}]);
angular-service.js
eposWebAngularStrutsApp.factory('StoreServerHealth', function($resource) {
return $resource('json/storeHealthCheckList.action'); // Note the full endpoint address
});
My JSP...
<table class="table table-striped" st-pipe="mc.callServer" st-table="mc.displayed" ng-controller="StoreHealthCheckController">
<thead>
<tr>
<th>Store</th>
<th>Server</th>
<th>Conn Status</th>
<th>Last Updated</th>
<th>MDI</th>
<th>Last Synched (MDI)</th>
<th>DSM</th>
<th>Last Synched (DSM)</th>
<th>Trading Status</th>
<th>Build</th>
</tr>
</thead>
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed">
<td>{{row.locationId}}</td>
<td>{{row.clientId}}</td>
<td>{{row.status}}</td>
<td>{{row.displayLastUpdateTime}}</td>
<td>{{row.replicationStatus}}</td>
<td>{{row.displayLastReplicationSyncTime}}</td>
<td>{{row.dsmReplicationStatus}}</td>
<td>{{row.dsmLastSynchTime}}</td>
<td>{{row.storeTradingStatus}}</td>
<td>{{row.buildVersion}}</td>
</tr>
</tbody>
<tbody ng-show="mc.isLoading">
<tr>
<td colspan="10" class="text-center">Loading ... </td>
</tr>
</tbody>
</table>
But I keep getting an error TypeError: href is null firebug/content/debugger/stackFrame/StackFrame.js.
Can someone let me know what I might be doing wrong here.
Thanks

The comment posted above was the answer to this question. I had forgotten to Alias the controller.

Mapping existing data in AngularJS

I'm starting to learn some AngularJS and am trying to determine its practicality when working along side ASP.NET MVC.
Let's say I have a view which displays beers from a repository in a table. I could output the information in two ways.
1.Using MVC's Razor Engine
Here, the model containing the beers is processed on the server and the html page rendered.
<h3>Rendered using Razor!</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Colour</th>
<th>Tasted?</th>
</tr>
</thead>
<tbody>
#foreach (var beer in Model)
{
<tr>
<td>#beer.Name</td>
<td>#beer.Colour</td>
<td>#beer.Tried</td>
</tr>
}
</tbody>
</table>
2.Using Angular repeat
Here, the HTML is returned straight away and angular performs a AJAX call to the controller to retrieve its model. After it has that data it outputs it into the table.
<h3>Rendered using Angular!</h3>
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Name</th>
<th>Colour</th>
<th>Tasted?</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="beer in model">
<td>{{ beer.Name }}</td>
<td>{{ beer.Colour }}</td>
<td>{{ beer.Tried }}</td>
</tr>
</tbody>
</table>
Controller
angular.module('BeerController', [])
.controller('BeerCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.model = {};
$http.get('/Beer/GetBeers').success(function (data) {
$scope.model = data;
});
}]);
My Question
Is there a way to use the Razor engine for the initial load of the data and Angular for everything else (paging calls, searching etc.)? In other words, how do I bind existing html to a controllers model in AngularJS?
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Colour</th>
<th>Tasted?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fosters</td>
<td>Gold</td>
<td>True</td>
</tr>
<tr>
<td>Becks</td>
<td>Amber</td>
<td>False</td>
</tr>
<tr>
<td>Cobra</td>
<td>Gold</td>
<td>True</td>
</tr>
</tbody>
</table>

In your MVC Controller
public ActionResult Index()
{
var model =.....
//optional
JsonSerializerSettings jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
ViewBag.data = JsonConvert.SerializeObject(model, Formatting.Indented, jsonSerializerSettings);
return View()
}
In your view Index.cshtml
...
#section Scripts {
//make sure that all anular scripts are loaded before that
<script>
angular.module('BeerController').service('dataService', function () {
var data= #Html.Raw(ViewBag.data);
return {
data:data
}
});
...
</script>
}
Angular Part:
angular.module('BeerController', [])
.controller('BeerCtrl', ['$scope', '$http','dataService', function ($scope, $http,dataService) {
// now you can get data from your dataService without extra trip to your server
$scope.model = dataService.data
....
}]);

Categories