I just started learning AngularJS and facing a problem. When I run the follwing code {{ cust.name }} - {{ cust.city }} gets printed instead of the actual data that I pass.
My code:
<html data-ng-app="">
<head>
<title>Using angularJS directive and data binding </title>
</head>
<body>
<div data-ng-controller="SimpleController">
Name:
<br/>
<input type="text" data-ng-model="name" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name"> {{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
<script src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Abhijeet Singh',
city: 'New Delhi'
}, {
name: 'Dhiraj Mehta , city: New Delhi '
}];
}
</script>
</body>
</html>
A few things are missing from your code.
First it is good practice to name your app and a controller:
<body data-ng-app='myApp' data-ng-controller='myCtrl'>
Second whenever you refer to anything in Angular is has to be in scope of the controller. Currently your $scope is in scope of the "SimpleController" function and not of Angular's controller (you need an angular controller to have $scope available both within the controller and within your html e.g. the double curly brackets):
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$scope is available anywhere within this scope
}
Here is an example of your code working: https://jsfiddle.net/AKMorris/03hshn5m/
You will need to declare the app name and see the other settings.
Rest of the things are same.
var myApp = angular.module("MyApp", []);
var simpleController = angular.module("SimpleController", SimpleController);
simpleController.$inject = ['$scope'];
function SimpleController($scope){
$scope.customers = [{
name: 'Abhijeet Singh',
city: 'New Delhi'
}, {
name: 'Dhiraj Mehta , city: New Delhi '
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html data-ng-app="MyApp">
<head>
<title>Using angularJS directive and data binding </title>
</head>
<body>
<div data-ng-controller="SimpleController">
Name:
<br/>
<input type="text" data-ng-model="name" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name"> {{cust.name }}-{{cust.city}}
</li>
</ul>
</div>
</body>
</html>
Related
I am trying to learn AngularJS, and going through an older tutorial I have built out a simple app. It has an index.html and two partial views which are loaded via ui-router. I know it's not separated into different files -- this is a learning project only.
The problem is that $scope does not seem to be available in View1 or in its called JS function , so ng-repeat doesn't seem to find anything to display, and addCustomer cannot see $scope.newCustomer.name. I am sure that I am missing something simple.
index.html:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="js/angular/angular.js"></script>
<script src="js/angular-ui-router/angular-ui-router.js"></script>
<!-- your app's js -->
<script>
var demoApp = angular.module('demoApp', ['ui.router']); // [] is for dependencies
// routes
demoApp.config(function($stateProvider, $urlRouterProvider) {
var nameState = {
name: 'name',
url: '/view1',
controller: 'SimpleController',
templateUrl: 'partials/View1.html'
}
var cityState = {
name: 'city',
url: '/view2',
controller: 'SimpleController',
templateUrl: 'partials/View2.html'
}
$stateProvider.state(nameState);
$stateProvider.state(cityState);
$urlRouterProvider.otherwise('/view1');
});
// controller
demoApp.controller("SimpleController", function ( $scope, $log ) {
$scope.log = $log;
$scope.customers = [{name: 'John Doe', city:'New York'},
{name: 'Jake Smith', city:'Atlanta'},
{ name: 'Jane Doe', city:'San Francisco'}];
$scope.addCustomer = function () {
$log.log("Add customer");
$scope.customers.push(
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}
);
};
});
</script>
</head>
<body>
<div>
<!-- placeholder for views inserted by ui-router -->
<ui-view></ui-view>
</div>
</body>
</html>
View1.html:
<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" /> You entered: {{filter.name}}
<div class="container">
<h3> Loop </h3>
<ul>
<li ng-repeat="cust in $scope.customers | filter:filter.name">{{ cust.name }} - {{ cust.city }}</li>
</ul>
<br /> Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br /> Customer City:
<input type="text" ng-model="newCustomer.city" />
<br />
<br />
<button ng-click="addCustomer()">Add Customer</button>
</div>
Switch to View 2
</div>
Use only
ng-repeat="cust in customers"
You don't have to specify $scope in the html:
ng-repeat="cust in customers"
try this :
<li ng-repeat="cust in customers">
you dont need to mention $scope.customers
try this (remove "$scope.") :
ng-repeat="cust in customers | filter:filter.name"
instead of :
ng-repeat="cust in $scope.customers | filter:filter.name"
I am a beginner in Angular JS and this is the most basic program that I am stuck on. The below program I am trying to run is simply not responding. I included the angular-route.js function but I am still stuck.
<html data-ng-app="demoApp">
<body data-ng-controller = "SimpleController">
<label>Name:</label>
<input type="text" data-ng-model="name"/> {{name}}
<ul>
<li data-ng-repeat="cust in customers"> {{cust.id}} - {{cust.name}} - {{cust.place}}</li>
</ul>
<script src="angular.min.js"></script>
<script src="angular-route.js"> </script>
</body>
<script>
var demoApp = angular.module('app', ['ngRoute']);
demoApp.controller('SimpleController', function ($scope){
$scope.customers=[
{id:1, name='John Doe', place:'San Fransisco'},
{id:2, name:'Jane Doe', place:'Seattle'},
{id:3, name:'John Mikael', place:'Las Vegas'}
];
});
</script>
This is the output
Name: {{name}}
{{cust.id}} - {{cust.name}} - {{cust.place}}
Here is the working code...
var demoApp = angular.module('myApp', []);
demoApp.controller('myController', function ($scope){
$scope.customers=[
{
id:1,
name:'John Doe',
place:'San Fransisco'
},
{
id:2,
name:'Jane Doe',
place:'Seattle'
},
{
id:3,
name:'John Mikael',
place:'Las Vegas'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<label>Name:</label>
<input type="text" data-ng-model="name"/> {{name}}
<ul>
<li data-ng-repeat="cust in customers"> {{cust.id}} - {{cust.name}} - {{cust.place}}</li>
</ul>
<script src="angular.min.js"></script>
<script src="angular-route.js"> </script>
</div>
Your issue here is with the way you declared your module name.
var demoApp = angular.module('app', ['ngRoute']);
<html data-ng-app="demoApp">
In this case, the var demoApp is not the name of the module, it is simply a variable that can be used elsewhere in your JavaScript. The actual module name is 'app', so you should be using <html data-ng-app="app">. I highly recommend making the name of the module and the variable name the same, whenever possible, to avoid this kind of confusion.
Also, as others have stated, you have a typo in your data: {id:1, name='John Doe', place:'San Fransisco'}, should be name: not name=.
I am new to angular js
Controller is not working correctly in my code
i am trying to run following code
<!DOCTYPE html>
<html data-ng-app >
<head>
<title>Using AngularJS Directives and Data binding</title>
</head>
<body>
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name"/>{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city"> {{cust.name | uppercase}}-{{cust.city | lowercase}} </li>
</ul>
</div>
<script src= "angular/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp',[]);
demoApp.controller('SimpleController', function($scope){
$scope.customers=[
{name:'John Smith', city:'kashipur'},
{name:'John fds' , city:'san francisko'},
{ name:'shubham', city:'giarhineg'},
{name:'batra', city:'world'}];
});
</script>
</body>
</html>
</html>
but its not giving desire output .
please tell me if i am doing something wrong .
You are missing to add value in your ng-app directive that tell angular to run demoApp module on the page.
ng-app="demoApp"
You should add the name of your app.
ng-app="demoApp"
var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Smith',
city: 'kashipur'
}, {
name: 'John fds',
city: 'san francisko'
}, {
name: 'shubham',
city: 'giarhineg'
}, {
name: 'batra',
city: 'world'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp">
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name" />{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{cust.name | uppercase}}-{{cust.city | lowercase}}</li>
</ul>
</div>
</div>
I just began to learn AngularJS by following this youtube video. First part is okay except when it comes to the controller part.
My code is as below (it's the same as in the video)
<html data-ng-app="">
<head>
<script src="angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Kamal',
city: 'York'
}, {
name: 'Sunil',
city: 'DC'
}, {
name: 'Malith',
city: 'Gotham'
}];
}
</script>
</head>
<body>
<div data-ng-controller="SimpleController">Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
when I add data-ng-controller="SimpleController" it will not working and give the following error in the console.
Then when I try to post the question in the SO , I tried it in JSfiddle. I added Angular.js and selected onLoad and not working. But when I selected no wrap - in <head> it works fine.
But I can't do that in my local machine so the problem remains as it is.
Can anybody point me to the correct path ?
You need to initialize app:
var app = angular.module("myApp", []);
<div ng-app="myApp" ng-controller="SimpleController">
<!-- ^^^^^ -->
Demo: http://jsfiddle.net/xy23ybzp/2/
Docs: https://docs.angularjs.org/guide/bootstrap
Check Manual Initialization Section in Docs
After getting help from the answers listed here for this question. I got it working. Below is the working code.
<html >
<head>
<script src = "angular.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("SimpleController",function($scope){
$scope.customers = [
{name :'Kamal',city : 'York'},
{name : 'Sunil',city:'DC'},
{name : 'Malith',city:'Gotham'}
];
});
</script>
</head>
<body >
<div ng-app="myApp" data-ng-controller="SimpleController">
Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
I am learning AngularJS. I am trying to list out the variable in controller. I have this in the script.
var demoController = angular.module('sampleController',[]);
demoController.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
And I have this in the HTML.
<html ng-app="demoController">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div ng-controller="sampleController">
<ul>
<li ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li>
</ul>
</div>
</body>
</html>
It is not listing out the variable. What is wrong with this script. Thanks!!
You need to define your module in the right way
var app = angular.module('app',[]);
Then, use it in your HTML file
<html ng-app="app">
See it working on jsbin
Note that, the angular module's name is the one defined within the quotes
angular.module('app',[]);
So, if you wrote var xModule = angular.module('app2',[]); your module name is app2 not xModule
Here is the code I am using :
<meta name="robots" content="noindex">
<html data-ng-app="app">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>
<h1>Applying filters</h1>
<div data-ng-controller="sampleController">
<ul><li data-ng-repeat="cust in customers">{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}</li></ul>
</div>
<script id="jsbin-javascript">var app = angular.module('app',[]);
app.controller('sampleController', function ($scope){
$scope.customers=[
{name:'John Smith', country:'Denmark', worth:'5000000'},
{name:'John Lewis',country:'England',worth:'10000000'},
{name:'Rick Evans',country:'America',worth:'6000000'}
];
});
</script>
</body></html>
And the output is :
Applying filters
{{ cust.name }} - {{ cust.country }} - {{ cust.worth | currency:"$":2 }}
Let me know what is missing here.