I just started learning AngularJS and I'm having some trouble with an Address Book app.
From what I can tell, the syntax is correct but the directives are not displaying the information from my scripts.js file. I tried using "use strict" and declaring ng-app as "AddressBook" but it is only showing the directives on screen and not the data.
I'm guessing I'm missing something but I have no idea what.
Here's my code: (AngularJS is now updated)
Old AngularJS Code:
function PeopleController($scope) {
"use strict";
$scope.people = [
{name: "Dani Moss", phone: "1234567890", city: "Richmond"},
{name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
{name: "Little John", phone: "4567853432", city: "Los Angeles"},
{name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
];
}
New Angular code:
var addressBook = angular.module('addressBook', []);
addressBook.controller('PeopleController', ['$scope', function PeopleController($scope) {
"use strict";
$scope.people = [
{name: "Dani Moss", phone: "1234567890", city: "Richmond"},
{name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
{name: "Little John", phone: "4567853432", city: "Los Angeles"},
{name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
];
}]);
<!DOCTYPE html>
<html ng-app="AddressBook">
<head>
<meta charset="UTF-8">
<title>Address Book</title>
</head>
<body ng-controller="PeopleController">
<h1>Address Book</h1>
<div>
<div ng-repeat="person in people">
<div>{{person.name}}-{{person.phone}}</div>
<span>{{person.city}} </span>
</div>
</div>
<!--Javascript-->
<script src="angular.min.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
Possible reason I have found is your are using latest angular script but you have been using old method. global controller functions encouraged poor practices, so angular resolved to disable this behavior by default from 1.3.
<!DOCTYPE html>
<html ng-app="AddressBook">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<body ng-controller="PeopleController">
<h1>Address Book</h1>
<div>
<div ng-repeat="person in people">
<div>{{person.name}}-{{person.phone}}</div>
<span>{{person.city}} </span>
</div>
</div>
<script>
var app = angular.module("AddressBook", []);
function PeopleController($scope) {
//"use strict";
$scope.people = [
{name: "Dani Moss", phone: "1234567890", city: "Richmond"},
{name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
{name: "Little John", phone: "4567853432", city: "Los Angeles"},
{name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
];
}
</script>
</body>
</html>
angular.module('AddressBook', []);
angular.module('AddressBook').controller('PeopleController', PeopleController);
function PeopleController($scope) {
"use strict";
$scope.people = [
{name: "Dani Moss", phone: "1234567890", city: "Richmond"},
{name: "Sarah Parker", phone: "1236548769", city: "Chicago"},
{name: "Little John", phone: "4567853432", city: "Los Angeles"},
{name: "Adam Doe", phone: "9025673152", city: "Las Vegas"}
];
}
<!DOCTYPE html>
<html ng-app="AddressBook">
<head>
<meta charset="UTF-8">
<title>Address Book</title>
</head>
<body ng-controller="PeopleController">
<h1>Address Book</h1>
<div>
<div ng-repeat="person in people">
<div>{{person.name}}-{{person.phone}}</div>
<span>{{person.city}} </span>
</div>
</div>
<!--Javascript-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</body>
</html>
Factories are Awesome
First off don't set data in your controller, I know its probably just a test but put it into a factory to replicate your http call.
.factory ('yourFactory', [ function () {
return {
getStuff: function () {
return //your data
};
}
}]);
Passing Data
Then in your controller get the factory data and set the scope
.controller ('yourController', [ '$scope', 'yourFactory', function ($scope, yourFactory) {
yourFactory.getStuff ().then (function (res) {
$scope.people = res.data;
});
}]);
In Conclusion
Having a proper data flow can solve data related problems. Doing a console.log at every step lets you see the resultant data in its current form. Use this to your advantage when trying to get data out of a variable.
Best of luck
Disclaimer code written on mobile phone from memory.
In HTML file, you have used <html ng-app="AddressBook"> and in script file, you have used
var addressBook = angular.module('addressBook', []);
You have to use the same name in both place. So you can fix this by changing your script file
var addressBook = angular.module('AddressBook', [])
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have created a simple table in HTML file. Now I need to make it exported in PDF or Excel or CSV format in Angular JS? Is there any easy way to do that?
Here is an example which exports html table, you can save as pdf, csv, xlsx and other supported formats by browser.
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.exportData = function () {
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report Example.xls");
};
$scope.items = [{
name: "John Smith",
email: "j.smith#example.com",
dob: "1985-10-10"
}, {
name: "Jane Smith",
email: "jane.smith#example.com",
dob: "1988-12-22"
}, {
name: "Jan Smith",
email: "jan.smith#example.com",
dob: "2010-01-02"
}, {
name: "Jake Smith",
email: "jake.smith#exmaple.com",
dob: "2009-03-21"
}, {
name: "Josh Smith",
email: "josh#example.com",
dob: "2011-12-12"
}, {
name: "Jessie Smith",
email: "jess#example.com",
dob: "2004-10-12"
}]
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="myCtrl">
<button ng-click="exportData()">Export</button>
<br />
<div id="exportable">
<table width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>DoB</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.dob | date:'MM/dd/yy'}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I´m trying do ng-repeat with two different objects. In this case I want to return "Name:Leanne Graham, Name: Asier". The JSON file has this.
users: {
0: {
email: "Sincere#april.biz",
id: 1,
name: "Leanne Graham",
phone: "1-770-736-8031 x56442",
username: "Bret",
website: "hildegard.org"
},
1: {
name: "Asier"
}
};
The element who has two objects is $scope.user and I try this
<div ng-repeat="(key, value) in user">{{name}}</div>
Nothing happens, and no errors in console.log.
Provided your data is actually in a valid format, repeating over the collection seems simple enough...
// note: this is just an example to put your data in scope
angular.module('so', []).run(function($rootScope) {
$rootScope.user = {
0: {
email: "Sincere#april.biz",
id: 1,
name: "Leanne Graham",
phone: "1-770-736-8031 x56442",
username: "Bret",
website: "hildegard.org"
},
1: {
name: "Asier"
}
};
});
<div ng-app="so">
<div ng-repeat="usr in user">{{usr.name}}</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
I need variable to tag javascript from my JSON file. This is a part of my JSON file
[
{
"title": "AfroEarth USA",
"url": "us",
"id": "50011",
"country" : "US",
"countryFlag": "img/flags/us-flag.png",
"countries": [
"AUSTRALIA",
"CANADA",
"SOUTH AFRICA",
"UNITED KINGDOM",
],
"countrieUrls": [
"/au",
"/can",
"/sa",
"/uk"
],
},
{
"title": "AfroEarth UNITED KINGDOM",
"url": "uk",
"id": "50011",
"country" : "UK",
"countryFlag": "img/flags/uk-flag.png",
"countries": [
"AUSTRALIA",
"CANADA",
"SOUTH AFRICA",
"UNITED STATES",
],
"countrieUrls": [
"/au",
"/can",
"/sa",
"/us"
],
},....
This is a part of my controller
afroEarthApp.factory('Main', ['$resource', function ($resource) {
return $resource('js/afromain.json',{})
}])
afroEarthApp.controller('afroEarthMainCtrl',['$scope','$http','$location','Main', function($scope, $http, $location, Main) {
$scope.mainSite = Main.query();
}]);
And my html
<!doctype html>
<html lang="en" ng-app="afroEarthApp">
<head ng-controller="afroEarthMainCtrl">
<!-- Site Title -->
<title>{{mainSite[0].title}}</title>
</head>
<body class="home-page" ng-controller="afroEarthMainCtrl">
<ng-view></ng-view>
<script src="bower_components/angular/angular.js"></script>
<!--Angular.js Route-->
<script src="bower_components/angular-route/angular-route.js"></script>
<!--Angular.js Resource-->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="js/controllers.js"></script>
<!-- WLD CAMPAIGN TRACKING -->
<script type="text/javascript">
$(document).ready(function(){
var $element = $('[ng-controller="afroEarthMainCtrl"]');
var scope = angular.element($element).scope().mainSite; // this is a problem
console.log(scope);
});
var wld_app_id = 312312;
var wld_app_url = "us.afroearth.com";
</script>
<title>{{mainSite[0].title}}</title> - this is works.
var scope = angular.element($element).scope().mainSite; - this is Array.
But when I want to get the first object.
var scope = angular.element($element).scope().mainSite[0]; - this is undefind.
var scope = angular.element($element).scope().mainSite[0].id; - also didn't work
My array
You are trying to get that information before it is available, if that information is coming back from $resource that means it is only available way later after document.ready occurs.
Also you should definitely not be using scope() there, if you explain better what you're doing it would be easier to help, if you need some value of resource in a global variable outside of your angular components you can declare the variable there and assign a value to it once the information comes back.
I could not figure out why the following code doesn't work at all. Frankly, It looks alright to me. Is there any idea?
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using AngularJS to create a simple Controller</title>
</head>
<body>
<div data-ng-controller="simpleController">
<ul>
<li data-ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
</ul>
</div>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js">
</script>
<script>
function simpleController($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
}
</script>
</body>
</html>
It is to do with the version of angular you are using.
Earlier versions of Angular allowed the ability to assign controller functions to the global scope like you did.
Then this ability was removed from angular.
There are still alot of tutorials around that reference this older style however.
See this demo - http://jsbin.com/fowamutoli/1/edit
I have replaced with angular legacy and your code runs.
So in the future you need to declare an angular module and register your controller against it.
i.e.
<html data-ng-app="app">
<script>
var app = angular.module('app', []).
controller('simpleController', function ($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});
</script>
https://docs.angularjs.org/guide/controller
try replacing your data-ng-app to ng-app="myApp", see if it works. :) with the following snippet.
var myApp = angular.module('myApp',[]);
myApp.controller('simpleController', ['$scope', function($scope) {
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
}]);
Try this instead:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Using AngularJS to create a simple Controller</title>
</head>
<body>
<div ng-controller="simpleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li>
</ul>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
var myApp = angular.module( "MyApp", [] );
myApp.controller("simpleController", function( $scope )
{
$scope.customers = [
{ Name: "Dave Jones", City: "Phoenix" }
, { Name: "Jamie Riley", City: "Atlanta" }
, { Name: "Heedy Walhin", City: "Chandler" }
, { Name: "Thomas Winter", City: "Seattle" }
];
});
</script>
</body>
</html>
http://jsfiddle.net/rv7r7nv7/
I have created a select box bound to a model using Angularjs.
The select box options load correctly but as soon as select any single option all options disappear from the select box. What is the reason this is occuring and how do I keep my options from disappearing?
Plunker link demonstrating the issue:
http://plnkr.co/edit/DolBIN
HTML
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
<title>Angular Test Prjoect - Home</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script type="text/javascript" src="Clinic.js"></script>
</head>
<body>
<div ng-controller="ClinicCtrl">
<select ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments" ng-model="appointments">
</select>
</div>
</body>
</html>
JavaScript
function ClinicCtrl($scope) {
$scope.appointments = [
{ start: "900", end: "930", provider: "1", patient: {name:"Allen",dob:"8/12/1977"} },
{ start: "1000", end: "1045", provider: "1", patient: { name: "Allen", dob: "8/12/1971"} },
{ start: "1030", end: "1100", provider: "2", patient: { name: "David", dob: "11/22/1973"} },
{ start: "1100", end: "1145", provider: "2", patient: { name: "Francine", dob: "3/18/1987"} },
{ start: "1230", end: "1530", provider: "3", patient: { name: "George", dob: "4/5/1997"} },
{ start: "1300", end: "1500", provider: "3", patient: { name: "Kirkman", dob: "6/28/1970"} }
];
}
The problem is that the ng-model on your select element overwrites the $scope.appointments array as soon as an item is selected. Use a different scope property for your ng-model value.
Here's an updated plunker: http://plnkr.co/edit/EAExby
The changes to your template would be:
<div ng-controller="ClinicCtrl">
<select
ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments"
ng-model="selectedAppointment"
></select>
{{selectedAppointment}} <!-- log out the value just to show it's working -->
</div>