We Keep Coding

AngularJS: using jsonplaceholder.typicode.com as a data source does not work

I am new to AngularJS so I got stuck with this small Users application.
Instead of writing the users array of data inside the controller - like I have already done HERE (jsFiddle), sucessfully - I want to use jsonplaceholder.typicode.com as a data source:
var root = 'https://jsonplaceholder.typicode.com';
// Create an Angular module named "usersApp"
var app = angular.module("usersApp", []);
// Create controller for the "usersApp" module
app.controller("usersCtrl", ["$scope", function($scope) {
$scope.users = root + "/users";
}]);
.search-box {
margin: 5px;
}
.table-container .panel-body {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" data-ng-app="usersApp">
<div class="panel panel-default table-container">
<div class="panel-heading">Users</div>
<div class="panel-body" data-ng-controller="usersCtrl">
<div class="row">
<div class="col-sm-12">
<div class="form-group search-box">
<input type="text" class="form-control" id="search" placeholder="Search User" data-ng-model="search">
</div>
</div>
<div class="col-sm-12">
<table class="table table-striped table-bordered" id="dataTable">
<thead>
<tr>
<th>Full name</th>
<th>Email</th>
<th>City</th>
<th>Street</th>
<th>Suite</th>
<th>Zipcode</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in users|filter:search">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.address.city}}</td>
<td>{{user.address.street}}</td>
<td>{{user.address.suite}}</td>
<td>{{user.address.zipcode}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
But it does not work, for some reason I can't understand. What am I doing wrong? Thank you!
Update: working fiddle HERE.

var root = 'https://jsonplaceholder.typicode.com'
$scope.users = root + "/users";
Here you have not made any http request to retrieve the data . Here the users variable in scope is only a
string i.e
$scope.users = 'https://jsonplaceholder.typicode.com/users'
The code should be something like this
var root = 'https://jsonplaceholder.typicode.com';
// Create an Angular module named "usersApp"
var app = angular.module("usersApp", []);
// Create controller for the "usersApp" module
app.controller("usersCtrl", ["$scope","$http", function($scope,$http) {
var url = root + "/users"
// $http is a service in angular which is used to make REST calls
// we call the url and get the data , which is resolved as a promise
$http.get(url)
.then(function(data){
// after the data is resolved we set it in the scope
$scope.users = data.data;
})
}]);

directive data sometimes does not appear after broadcast

I'm getting this annoying bug with Angular where I broadcast data to a directive but the directive's $on doesn't receive it.
Therefore, my table doesn't populate at all and looks terrible to users.
test_results.html (contains an instance of the directive):
<div>
<h1>Test Results</h1>
...
<results></results>
</div>
resultsCtrl.js controller:
$timeout(function () {
$rootScope.$broadcast('show-results', test_session.question_objects);
}, 100);
results.html directive template (most fields stripped out):
<div class="results">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td ng-if="average_times && !$root.is_mobile">
<span ng-click="sortType = 'question.average_timing'; sortReverse = !sortReverse">
Avg. Time
</span>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="q in questions | orderBy:sortType:sortReverse | filter:searchQuestions track by $index">
<td ng-if="q.average_timing && !$root.is_mobile" ng-click="$root.openDirections('question', q)">{{ q.average_timing }}</td>
</tr>
</tbody>
</table>
</div>
results.js directive:
scope.$on('show-results', function(event, test_session) {
setTestSessionData(test_session);
});
...
function setTestSessionData (test_session) {
scope.questions = test_session;
}
I cannot figure out when exactly this happens. At first I thought it's when I load the site for the first time, but I've tried that since and the data is rendered.

Whenever you do a $rootScope.$broadcast all the child scopes who have registered to those events via $scope.$on will catch the event. Same goes with directive scope also. If you update the model in the event listener , it will be updated in the view.
Working plunker : https://plnkr.co/edit/4iokGsfPH5IqNdecjaGd?p=preview

How to access a specific $scope variable when loading a different .html file?

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

get Data using angularJS

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

My Angular view is not updated with data form server

I am using Angularjs and i make a call form server to retrieve data. Data are successfully retrieved but my view is not updated. I don't understand why. Here are the code i use.
Angularjs and html code :
<div class="row custom-margin" ng-controller="ListCtlr" ng-init="initData()">
<form class="form-inline" role="form" id="formId" name="formId">
<div class="form-group">
<label for="searchInput">Data to search</label>
<input ng-model="searchInput" placeholder="Enter term to search">
</div>
<button type="submitSearch" class="btn btn-primary" ng-click="search()">Go</button>
</form>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr class="info">
<th colspan="4" class="centertext">Name</th>
<th colspan="3" class="centertext">Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Controller code :
function ListCtlr($scope, $http, $location,$filter) {
$scope.formId = {searchInput: ''};
$scope.search = function () {
var url='server/search/'+this.searchInput;
$http.get(url)
.success(function (data) {
$scope.persons = data;
})
.error(function(data){
$scope.error = data;
});
};
}
When i inspect the data retrieved form server i get the following JSON data :
[{"name":"John","age":12},{"name":"Mary","age":25},{"name":"Garry","age":28}]
What's missing please ?

Change
<tr ng:repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
to
<tr ng-repeat="person in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>

The problem is that your ListCtlr controller is placed on a div that does not contain your ng-repeat.
To solve this, create an outer div, put the ng-controller on that div:
<div ng-controller="ListCtlr">
... (place contents of your html here) ...
</div>
This ensures that ListCtlr's scope includes the ng-repeat.
Note: Be sure to remove the ng-controller="ListCtlr" defined in your inner div.