I'm trying to get Data in HTML Table using angularJS, I've splitted the project in 3 parts :
1- Main Part : main.html : which load html Table file and also the Java script(angularJS) (Main.html)
<div class="panel panel-primary">
<div class="panel-heading">Student's List</div>
<div ng-include="'Student_list.html'">
</div>
<script src= "../js/ngMain.js"></script>
2- Html Table : it's Table html tag (Student_list.html)
<table class="table table-borAdherentdered table-hover" id="stdlst">
<thead>
<tr>
<th>Id</th>
<th>Full Name</th>
<th>Email</th>
<th>Birth's Date</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="std in students">
<td>{{std.Id}}</td>
<td>{{std.Name}}</td>
<td>{{std.Email}}</td>
<td>{{std.BoD}}</td>
<td>{{std.Class}}</td>
</tr>
</tbody>
</table>
3- JS File : load data From mySQL (ngMain.js)
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.GetStudent=function() {
$scope.students=[];
$http.post("Main.php",{'ScriptName':'GetData','ScriptParam':'student'+"|"+'Id'+";"+'Name'+";"+'Email'+";"+'BoD'+";"+'Class',"DataTypeResult":'string'})
.success(function (data,status,headers,config) {
$scope.students=data;
console.log("Get Student List succesfully");
});
}
});
The php script (Main.php) it's working I have tested using REST app with no problem.
My Problem here :
Is that I don't get any Data, only Table Header (BTW :in student Table there is a lot of records) ?
Any idea What 's missing ? or if I m doing it wrong please correct me .
Thanks.
/Koul
I think that the code you posted is incomplete.
There are no ng-app and ng-controller at all and the GetStudent function is never called.
However here there is a working fiddler with mock data that I think will help you.
http://jsfiddle.net/ds7hryn5/2/
HTML:
<div ng-app="myApp">
<div class="panel panel-primary" >
<div class="panel-heading">Student's List</div>
<table class="table table-borAdherentdered table-hover" id="stdlst" ng-controller="myCtrl">
<thead>
<tr>
<th>Id</th>
<th>Full Name</th>
<th>Email</th>
<th>Birth's Date</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="std in students">
<td>{{std.Id}}</td>
<td>{{std.Name}}</td>
<td>{{std.Email}}</td>
<td>{{std.BoD}}</td>
<td>{{std.Class}}</td>
</tr>
</tbody>
</table>
</div>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope','$http',function($scope,$http) {
$scope.GetStudent=function() {
$scope.students=[{
Id:4,
Name:'Name1',
Email:'name1#eee.it',
BoD:'bod1',
Class:'class'
},{
Id:5,
Name:'Name2',
Email:'name2#eee.it',
BoD:'bod2',
Class:'class'
},{
Id:6,
Name:'Name3',
Email:'name3#eee.it',
BoD:'bod3',
Class:'class'
}];
}
$scope.GetStudent();
}]);
It seems to me that your function, $scope.GetStudent, is never called in your controller, thus the data for your table is never fetched.
If $scope.students stays empty, you will see only the headers of your table.
To debug these kinds of issues, it is good practice to watch the network tab in your developer tools of the browser you're using, just to see if your data provider (Main.php) is being called.
In this case I would suspect that it isn't since there is no call to your $scope.GetStudent function in your provided code.
To call the function when the script is loaded, just add a call ($scope.GetStudent()) in your controller just after your function definition.
Example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.GetStudent=function() {
$scope.students=[];
$http.post("Main.php",{'ScriptName':'GetData','ScriptParam':'student'+"|"+'Id'+";"+'Name'+";"+'Email'+";"+'BoD'+";"+'Class',"DataTypeResult":'string'})
.success(function (data,status,headers,config) {
$scope.students=data;
console.log("Get Student List succesfully");
});
}
$scope.GetStudent();
});
Regards,
Sem
Related
In my application, I can verify that the correct info is being selected by using a console.log, but trying to display this info in a form textbox isn't working. Can someone please tell me what I'm doing wrong?
Here is me view's HTML.
<table class="table table-stripped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="organization in organizations | filter:search" data-ng-click="navToEdit($index)">
<td>{{organization.Id}}</td>
<td>{{organization.Title}}</td>
</tr>
</tbody>
</table>
Here is what clicking an item in that list takes you to.
<div class="form-group">
<label for="txtTitle">Title:</label>
<input type="text" type="text" id="txtTitle" class="form-control" data-ng-model="organization.Title" />
</div>
Here is my controller.
app.controller("organizationsCtrl", ["$scope", "$location", "$routeParams", "spService",
function ($scope, $location, $routeParams, spService) {
var listTitle = "Organizations";
$scope.editing = false;
//example populating Organizations
spService.getRecords(listTitle, "?$select=ID,Title").then(function (result) {
$scope.organizations = result;
});
$scope.navToAdd = function() {
$location.path("/organizations/add");
}
$scope.navToEdit = function(index) {
$scope.organization = $scope.organizations[index];
$location.path("/organizations/" + index);
console.log($scope.organization.Title);
}
}
]);
$scope.navToEdit does output the correct organization, but the textbox of txtTitle doesn't show anything.
Please help!!
As i see , the problem here is you are redirecting to another page here,
$location.path("/organizations/" + index);
which will clear the existing scope within the controller, if you want to transfer the data from one page to another use service or localStorage.
I've created an AngularJS application with a input for filtering the <tbody>'s <tr>.
Right now my table is filtering on both Country and City - I want it to only filter on Country. I've tried a lot of variations of filter:{Country: Search} but it doesn't seem to be working.
Thanks to user edisoni.1337 I have an updated working example using AngularJS 1.2.1 (the one seen below).
var app = angular.module('myApp', []);
app.controller('callCtrl', function($scope)
{
$scope.stuff = [{"House": {"Country": "Denmark", "City": "Copenhagen"}}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="callCtrl">
<input type="text" ng-model="Search">
<table>
<thead>
<tr>
<th>Country</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in stuff | filter : {'House.Country' : Search}">
<td>{{x.House.Country}}</td>
<td>{{x.House.City}}</td>
</tr>
</tbody>
</table>
</div>
CDN for 1.5.6:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Here you have a working jsfiddle
<tr ng-repeat="x in stuff | filter : {'House.Country' : Search}">
<td>{{x.House.Country}}</td>
<td>{{x.House.City}}</td>
</tr>
Also read this article for better understand
http://www.w3schools.com/angular/ng_filter_filter.asp
This works on 1.5.6 with few changes on the code above: http://jsbin.com/zuxokuy/edit?html,js,output
I am trying to get some data into a tab. My application uses ng-route, so here is my config code:
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/EventList',{
templateUrl:'html/eventsList.html',
controller: 'eventListController',
controllerAs:'eventListCrtl'
})
.otherwise({redirectTo:'/'});
}]);
I define here the controller and the name the controller will have inside my template with controllerAs
Here is my controller code:
app.controller('eventListController',['$scope', 'EventListHolder', function($scope, EventListHolder){
var eventList = EventListHolder.get();
window.alert(eventList.eventHead[1].numeroDossier);
}]);
It retrieves the data from a factory. The data is loaded into the controller since the window.alert works.
But for some reson it doesnt see to show up in my template, where I am trying to display the eventHead table in an HTML table.
Here is the HTML:
<div align="center">
<div class="container-fluid">
<header>
<h1>Event List</h1>
</header>
</div>
<table class="row-spacer40 table-fill" >
<thead>
<tr>
<th class="text-left">Numero</th>
<th class="text-left">Dossier/Client</th>
<th class="text-left">Lieu</th>
</tr>
</thead>
<tr ng-repeat="event in eventListCrtl.eventList.eventHead">
<td> {{event.numeroDossier}}
</td>
<td>{{event.designationDossier}}<br>{{event.nomClient}}
</td>
<td>{{event.adresse}}
</td>
</tr>
</table>
</div>
Is there something specific to ng-route that I am overlooking ?
PS: If it helps, here is the JSON containing the data. (If you want a clear definition of my data structure.)
{
"eventHead": [
{
"numeroDossier": 96549,
"designationDossier": "TECHNIQUE MARIAGE ",
"nomClient": "Olivia John & Donovan Hamlet",
"adresse": "ABBAYE DES VAUX DE CERNAY"
},
{
"numeroDossier": 98986,
"designationDossier": "TOURNEE FDJ OLA",
"nomClient": "LA FRANCAISE DES JEUX",
"adresse": "MAGNUM"
}
],
"success": true
}
You should be using
this.eventList = EventListHolder.get();
instead of var eventList. ControllerAs syntax expects your view models to be binded to the 'this' object instead of $scope.
First of all, sorry about the title, I just wan't sure how to word this question.
So I'm making a task manager using AngularJS. I have a form for the user to fill with the details when he's creating a new task. I use ng-model to save these values to my $scope. Here's how I save them:
$scope.add = function(tasks)
{
{
$scope.tasks.push({
'id': tasks.id,
'title': tasks.title,
'start_day': tasks.start_day,
'start_time':tasks.start_time,
'start_date':tasks.start_day + " " + tasks.start_time,
'end_day': tasks.end_day,
'end_time': tasks.end_time,
'end_date':tasks.end_day + " " + tasks.end_time,
'type': tasks.type,
'description': tasks.description
});
localStorage.setItem('tasks',JSON.stringify($scope.tasks));
}
};
Then, as you can see, I save these values to the local storage. I have an array called tasks with all the tasks the user created. I then display these tasks in a table with this:
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>
Then, the objective is that you can click any row and load a new page with all the task details. I do this with the function details(), which has the following code:
$scope.details = function (task)
{
$window.location.href = 'table.html';
}
This loads the file table.html and what I want is to display in this page all the task details, i.e., the ID, the title, the description, etc.
What I don't know is how to only display the specific task that you click on. For example, if I click on the row with the task "Todo #1", I only want to see the details for the task "Todo #1".
to access this variable in other html you can use factory or service like this
(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
return {
};
});
})();
Now datafactory is factory we need to inject this module(dataModule) in your module and factory(datafactory) in controller
Now how to use this factory
in your function
$scope.details = function (task)
{
datafactory.currentTask =task
$window.location.href = 'table.html';
}
Now this datafactory stores your variable that can we used in any controller and later on also you can use this factory to store any such variable for global use
like this datafactory.Myvariable ="hasd"//assign here
Now to use this variable
Suppose you want to use this variable in another page table.html there on
// in html ng-init ="$scopeInit()"
in controller
$scopeInit =function(){
$scope.localTask =datafactory.currentTask
}
and use $scope.localTask
suppose html looks something like this
<div ng-controller ="my-controller" ng-init ="$scopeInit()">
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>
<div>
//in controller
$scopeInit =function(){
$scope.task =datafactory.currentTask
}
//$scope.task contains required array and hence table can be created
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
....
}]);