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/
Related
I'm trying to destroy the kendo-grid each time my component is destroy.
I found out here a way to do it but requires jquery that I don't use:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.destroy();
</script>
Any one knows how to do it in angular 6 and typescript?
Thank you
Given the following code:
http://jsfiddle.net/KN9xx/1102/
Suppose I received an ajax call with the following data I pass to a scope variable:
$scope.people_model = {
"people":[
{
"id":"1",
"name":"Jon"
},
{
"id":"2",
"name":"Adam"
}
]
};
How would I work with the select box to iterate over the 'people' via ng-options?
<select
ng-options="p.name for name in people_model"
ng-model="people_model">
</select>
Change your select as ,
<select ng-model="currentSelected" ng-options="selection.id as selection.name for selection in people_model.people"></select>
You need to access the array people inside the object people_model
DEMO
var app = angular.module('myapp', []);
app.controller("FirstCtrl", ["$scope",
function($scope) {
$scope.currentSelected = "1";
$scope.people_model = {
"people": [{
"id": "1",
"name": "Jon"
}, {
"id": "2",
"name": "Adam"
}]
};
}
]);
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="FirstCtrl">
<select ng-model="currentSelected" ng-options="selection.id as selection.name for selection in people_model.people"></select>
</body>
</html>
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', [])
I am using ng-repeat directive but it does not showing me value. Here is my code
JS File:
var artist = angular.module('artistApp',[]);
artist.controller('artistController',['$scope',function($scope){
$scope.author =
{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar"
},
{
"name":"Hillary Hewitt Goldwynn-Post",
"shortname":"Hillary_Goldwynn"
}
}]);
HTML file:
<head>
<meta charset="utf-8">
<title>Angular Demo</title>
<script src="angular/angular.min.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="artistController">
<ul>
<li ng-repeat="item in author">
{{item.name}}
</li>
</ul>
</div>
</body>
Where is the mistake that i m doing wrong here.
You're missing the opening bracket to the author array
$scope.author =
{
Needs to be:
$scope.author =
[{
in JS
$scope.author =
[{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar"
},
{
"name":"Hillary Hewitt Goldwynn-Post",
"shortname":"Hillary_Goldwynn"
}];
HTML
<li ng-repeat="item in author track by $index">
{{item.name}}
</li>
Replace the last '}' with ']'
Working Plunker
Corrected JSON:
[{
"name":"Barot Bellingham",
"shortname":"Barot_Bellingham"
},
{
"name":"Jonathan G. Ferrar II",
"shortname":"Jonathan_Ferrar"
},
{
"name":"Hillary Hewitt Goldwynn-Post",
"shortname":"Hillary_Goldwynn"
}
]
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>