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.
Related
I need to use Angularjs datatable for my project for the features like search and sorting etc.
My current structure is :-
HTML
<table datatable="" class="table table-striped table-bordered row-border hover" ng-show=query_executed>
<thead >
<tr >
<th ng-repeat="x in keys">{{x}}</th>
</tr>
</thead>
<tbody style="overflow-y: scroll;">
<div class="ScrollStyle">
<tr ng-repeat="y in myWelcome">
<td ng-repeat="z in y">{{z}}</td>
</tr>
</div>
</tbody>
</table>
Here keys contain column names.
y is rows and z is elements of rows.
JavaScript
$scope.GetQueryResult = function() {
$http.get('view2/datafile.html')
.success(function(data, status, headers, config) {
$rootScope.myWelcome = data[1]["result_text"]["data"][0]["chunk_data"];
$rootScope.colname = $rootScope.myWelcome[0];
var key, x;
$rootScope.keys = [];
for (key in $rootScope.colname) {
if ($rootScope.colname.hasOwnProperty(key))
($rootScope.keys).push(key);
}
})
.error(function(data, status, header, config) {
$rootScope.myWelcome = status;
});
};
But the problem is i am not getting required features described above.
Current page:-
view of my current page
I would like to know the problem with the code.
Thanks.
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.
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
....
}]);
First of all i'm new to AngularJS and stackoverflow so i'm very open minded. My problem is that i have a table that has 3 items that use the ng-blur directive to call a save function
UI
<div ng-controller="measureController">
<div class="jumbotron">
<h3>RatingYear</h3>
<select ng-model="ratingYear" ng-change="getMeasures()">
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
</div>
<!-- this is going to be the container for each measure-->
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Measures for {{ratingYear}}</div>
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th>Code</th>
<th>Name</th>
<th>Action</th>
<th>Active</th>
<th>Order</th>
</tr>
<tr ng-repeat="measure in measureList track by measure.MeasureId">
<td class="col-md-1">{{measure.Code}}</td>
<td class="col-md-5">{{measure.Name}}</td>
<td class="col-md-4"><textarea ng-model="measure.Action" ng-disabled="!measure.Active" ng-blur="save(measure)"></textarea></td>
<td class="col-md-1"><input type="checkbox" ng-checked="measure.Active" ng-model="measure.Active" ng-change="save(measure)" /></td>
<td class="col-md-1"><input class="form-control" ng-model="measure.Order" ng-disabled="!measure.Active" ng-blur="save(measure)" /> </td>
</tr>
</tbody>
</table>
</div>
</div>
Controller
function measureController($scope, $http) {
$scope.years = [2014,2015, 2016 ];
//get Measures Per Year
$scope.getMeasures = function () {
$http.get('/api/measure/' + $scope.ratingYear)
.success(function (data, status, headers, config) {
$scope.measureList = data;
$scope.$apply();
//$scope.loading = false;
})
.error(function () {
$scope.error = "An Error has occured while loading measures!";
$scope.loading = false;
});
};
//Edit Measure
$scope.save = function () {
$scope.loading = true;
var uMeasure = this.measure;
var active = uMeasure.Active ? 1 : 0;
$http.post('/api/measure/' + uMeasure.MeasureId + '/status/' + active, uMeasure)
.success(function (data, status, headers, config) {
$scope.measureList.push(data);
$scope.$digest();
})
.error(function (data,status, headers, config) {
alert("You failed misserably"+data);
});
};
}
I want to be able to refresh the measureList every time save has been called with the new object that has been inserted, that is the modify copy of the existing, right now is creating multiple copies of the same one in the database and i can only see it when i reload the page or change the value in ratingYear.
Thanks in advance
I have a table in Angularjs that has a checkbox in each row. When the checkbox is clicked, I would like an alert function to be launched to display the content of the row being clicked. The problem I face is how can the alert function access the data content of the row?
The table in html looks like this;
<table class="table table-hover data-table sort display">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Checkbox Alert</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
<td>{{item.name}}</td>
<td>{{item.location}}</td>
<td> <input type="checkbox" ng-click="alert_display()"> </td>
</tr>
</tbody>
</table>
The controller code looks like this;
$scope.alert_display = function()
{
alert("Testing");
};
I would like alert_display() to display the contents of {{item.name}} and {{item.location}} of the relevant row.
Do the following:
<input type="checkbox" ng-model="selected" ng-change="display(selected, item)">
your JS code:
$scope.display = function(selected, item) {
if(selected)
alert(item.name + ' ' + item.location);
else
// do sth else
}
Here is the fiddle: http://jsfiddle.net/HB7LU/4156/