enter image description here
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ContactApp</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
Not so long time ago i started to learn MEAN stack and stuck in this problem.
As you can see on picture controller receive data from server but don't display it. What should I do to fix it? Thanks for any help. Sorry for poor English =D
controller code:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
}]);[enter image description here][1]
server code:
var express = require("express");
var app =express();
app.use (express.static(__dirname + "/public"));
app.get ('/contactlist',function(req,res){
console.log ('waitnig for my lovely request');
person1 = {
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
}
person2 = {
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
person3 = {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}
var contactlist = [person1,person2,person3];
res.json(contactlist);
})
app.listen(3000);
console.log ('server runing on port 3000');
Make sure your rest api returns a json array.
DEMO
var app = angular.module('todoApp', []);
app.controller("AppCtrl", ["$scope",
function($scope) {
$scope.contactlist = [{
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
},
{
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
, {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<div class="container">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Change:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
To:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; // note the .data part
});
The response object properties can be found at : https://docs.angularjs.org/api/ng/service/$http
I cant comment because my reputation is too low but what do you see if you console.log(response) in your controller?
if the data is coming through intact, it your page is likely loading before the data arrives, hence displaying as empty. If that is the case the following will work.
<div class="container" ng-controller="AppCtrl" ng-show='isLoaded'> // add this ng-show
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$scope.isLoaded = false // add this
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; //make response.data as Daniel said above
$scope.isLoaded = true; // add this
});
}]);[enter image description here][1]
Related
I want to make a table, based on this model (Material Design Lite) :
https://getmdl.io/components/index.html#tables-section
In my code, I have a list, and I try to display it, in the following way, by using a ng-repeat :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
But the result is not the same than in the illustration example :
As we can see, there is no checkbox on the left and I don't understand why.
Also, how to make a table, where we can directly add data on it ?
In fact, with a fixed list, it works. But mine is generated by a request in a database, and its value can be changed. My listadmin is empty at the beginning, and it is completed by an authentification process.
Your code work correct.
<html ng-app="myApp">
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script>
angular.module('myApp', []).controller('MainController', ['$scope', function($scope){
$scope.listAdmins = ['admin1', 'admin2', 'admin3'];
}]);
</script>
</head>
<body ng-controller="MainController as main">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Id. administrateurs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="admin in listAdmins">
<td class="mdl-data-table__cell--non-numeric" ng-model="adminselected">{{admin}}</td>
</tr>
</tbody>
</table>
</body>
</html>
May be some errors occurred? Can you see browser console.
I'm new to mean stack implementation. I have tried to view data from controller. But It didn't work. web brower's console gave this error message at that time.
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl
Stack trace:
M/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:6:425
wf/this.$get</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:93:395
ba#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:76:290
n#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:68:1
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:496
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
ca/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:119
Pc/c/</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:4
Mf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:176
Mf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:400
Pc/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:469
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:44:169
Pc/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:390
Pc#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:179
ue#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:20:379
#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:332:117
b#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:38:36
Following files are server.js , index.html and controller.js files.How can Isolve this problem.
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + "/public"));
app.listen(3000);
console.log("Server is running");
index.html
<!DOCTYPE>
<html ng-app>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Contact app list</title>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
controller.js
function AppCtrl($scope){
console.log("Hello controller");
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
$scope.contactlist = contactlist;
}
This is error caused because the controller is not register in your application. The function AppCtrl is not called. Try registering the controller like this
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
for any doubts please check documentation example of controller
Please let me know if i misunderstood or missed something.
Hope this is helpful. Thank you.
var AppCtrlfn = function ($scope){
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
$scope.contactlist = contactlist;
}
angular.module('app', [])
.controller('AppCtrl',AppCtrlfn)
<html ng-app="app">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Contact app list</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in contactlist">
<td>{{content.name}}</td>
<td>{{content.email}}</td>
<td>{{content.number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
extends from #yashwanth_t's comment and modify from your code
try this
your app.js
var myApp = angular.module('myApp',[]);
myApp.controller('ContactCtrl', ['$scope', function($scope) {
var person1 ={
name:'Hello',
email: '123',
number:'1'
};
var person2 ={
name:'gello',
email: '456123',
number:'31'
};
var person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
$scope.contactList = [];
$scope.contactList.push(person1);
$scope.contactList.push(person2);
$scope.contactList.push(person3);
console.log($scope.contactList)
}]);
in your index.html
<div class="container" ng-app="myApp">
<h1>Contact List</h1>
<table class="table" ng-controller="ContactCtrl">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactList">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
Thank you everyone who try to help me..
I have to change index.html and controller.html files to solve that problem.
index.html
<!DOCTYPE>
<html ng-app="myapp">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Contact app list</title>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in contactlist">
<td>{{content.name}}</td>
<td>{{content.email}}</td>
<td>{{content.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
controller.js
var app = angular.module('myapp',[]);
app.controller ('AppCtrl', function($scope){
console.log("Hello controller");
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
console.log(contactlist);
$scope.contactlist = contactlist;
});
I'm trying to pass form data between html pages without using services.
Here is my code link --> http://plnkr.co/edit/E6LM5Oq67XRcvVuMIv9i?p=preview
Below is my contacts.html page.
<html>
<head>
<title>Contacts Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" >
<table>
<tr>
<th>User ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
</tr>
<tr ng-repeat="contact in contacts">
<td>{{contact.uid}}</td>
<td>{{contact.fname}}</td>
<td>{{contact.lname}}</td>
<td>{{contact.pphone}}</td>
</tr>
</table>
</body>
</html>
The data is not getting passed to contacts.html.How to do this ?
Using rootScope we can archive this.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.carname = "Volvo";
$rootScope.car=$scope.carname;
});
app.controller('controllerTwo', function($scope, $rootScope) {
$scope.getcarname = $rootScope.car;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
<div ng-controller="controllerTwo">
<h1>Using rootscope: {{getcarname}}</h1>
</div>
</div>
I am creating an application related to cricket match information in angular. Am getting problem in fetching api response. you can check api response here.
Console is showing error, please check
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-app="cricApp" ng-controller="cricCtrl">
<div class="form-group">
<h2>Your result</h2>
<table class="table table-striped">
<thead>
<tr><th colspan="4"><h4>Cricket Match Info</h4></th></tr>
<tr>
<th>Sno</th>
<th>unique_id</th>
<th>description</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="match in matchList | filter: nameFilter">
<td>{{$index + 1}}</td>
<td>
{{match.unique_id}}
</td>
<td>{{match.description}}</td>
<td>{{match.title}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('cricApp', []).
controller('cricCtrl', function($scope, $http) {
$scope.matchList = [];
$http.get("http://cricapi.com/api/cricket").then(function (response) {
console.log(response);
$scope.matchList = response.data;
});
}
);
</script>
</body>
</html>
your code is fine just replace
$scope.matchList = response.data;
with
$scope.matchList = response.data.data;
because actual data is coming in data inside response.data.
The header 'Speedruns' keeps getting repeated. How can I fix this?
Also, if there is a better way to do this please let me know.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='styles.css'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script>
var app = angular.module('player2', []);
app.controller('MainController', function($scope, $http) {
$scope.data0 = null;
$scope.urls = [ // List of REST api calls with with all the streams we want.
'http://api.speedrunslive.com/test/teamK',
];
$http.get($scope.urls[0]).success(function(data) {
$scope.data0 = angular.fromJson(data);
console.log(angular.fromJson(data))
});
});
</script>
</head>
<body ng-app='player2'>
<div ng-controller="MainController">
<table class="table-size" ng-repeat="chan in data0.channels">
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr>
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>
</div>
</body>
</html>
Attached a plunker with the code in it.
Plunker
The thing you want to repeat is the tr, so put your repeat on there. At the moment you are repeating whole the table. The following should work:
<table class="table-size" >
<tr>
<th class="text-center" colspan="2">Speedruns</th>
</tr>
<tr ng-repeat="chan in data0.channels">
<td class="text-left">{{chan.channel.display_name}}</td>
<td class="text-left">{{chan.channel.current_viewers}}</td>
</tr>
</table>