I am expecting the below code to print the numbers.I tried but I am not sure what I am missing here. I am new to AngularJs
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Welcome</title>
</head>
<body>
<div ng-controller="MyController">
<ul>
<li ng-repeat="number in Numbers">{{ number }}</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
function MyController($scope) {
$scope.Numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
}
</script>
</body>
</html>
this completely should work. check console (F12, developer tools) to see if you have any error message, especially if your angular.min.js is included correctly.
The following little js fiddle show you the little piece of code does work, as long as your angular js is included correctly.
function MyController($scope) {
$scope.Numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
}
http://jsfiddle.net/dshun/o1yg3kvp/
Edited
From Angular 1.2 onwards, you can't declare your controller globally the way you are doing right now . You have to declare it with the module.
var app = angular.module('myApp',[]);
app.controller('MyController',function($scope){
$scope.Numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
})
See the working changes: http://plnkr.co/edit/Rp87qEQ5albeCQPYVh48?p=preview
If you insist on doing the way you are doing right now, you can actually allow globals in your config. Try to run the snippets below.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs_1_3_15#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MyController">
<ul>
<li ng-repeat="number in Numbers">{{ number }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
function MyController($scope) {
$scope.Numbers = ['One', 'Two', 'Three', 'Four', 'Five'];
}
angular.module('myApp').config(['$controllerProvider',
function($controllerProvider) {
$controllerProvider.allowGlobals();
}
]);
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call('d')">for d</button>
<button ng-click="call('f')">for f</button>
<ul>
<li ng-repeat="x in a.{{replace}}">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.a = {
d:[1,2,3,4,5],
f:[6,7,8,9]
};
$scope.call = function(val) {
$scope.replace='val';
}
});
</script>
</body>
</html>
I'm trying to add dynamically the values to ng-repeat content, but it's not working, please do help
can we add dynamically values to ng-repeat itself so we can change the iterating values every time by simply changing one value like above, if not is there any better ideas
The following snippet can help you.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call('d')">for d</button>
<button ng-click="call('f')">for f</button>
<ul>
<li ng-repeat="x in a[replace]">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope) {
$scope.a = {
d: [1, 2, 3, 4, 5],
f: [6, 7, 8, 9]
}
$scope.call = function (val) {
$scope.replace = val;
}
});
</script>
</body>
</html>
Explanation :
$scope.replace=val; //Assign the variable and not a string
<li ng-repeat="x in a[replace]"> // No need to use braces are you are in an ng tag already
Instead of passing strings you can pass the values in the call function then assign those values to $scope.replace which then update your ng-repeat
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="call(a.d)">for d</button>
<button ng-click="call(a.f)">for f</button>
<ul>
<li ng-repeat="x in replace">
{{x}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.a = {
d: [1,2,3,4,5],
f: [6,7,8,9]
}
$scope.call = function(val){
$scope.replace=val;}
}
);
</script>
</body>
</html>
I just started AngularJS today; so I'm still very new to it. I have the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">
<div class="container">
<h3>Looping with the ng-repeat Directive</h3>
<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}
When I run the above code, this is what I get:
when I remove the controller directive from the body tag, I get this:
I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!
Try to register controller in angularjs app using build in dependency injection, in other words:
<script type="text/javascript">
var app = angular.module("app", []);
app.controller('SimpleController', ['$scope', function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}]);
</script>
then change ng-app to ng-app="app".
Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output
I am following some tutorials on AngularJS, but the below code is not working for me
<!DOCTYPE html>
<html ng-app="simpleApp">
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="entry in collection"> {{ entry }} </li>
</ul>
</div>
</body>
</html>
and below is my index.js code
var app = angular.module("simpleApp", []);
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
};
})
According to the tutorials output must be
first
second
third
but my output is
{{ entry }}
You have a random }; in your code
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
};
})
Should be:
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
})
I can't able to find out the issue for the following code. I never written controller in html file. I did this for a testing purpose.
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>
<body ng-controller="sampleController">
<div>
<h2>Adding a sample controller</h2>
<ul>
<li ng-repeat="cust in customers">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function sampleController($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
</script>
</body>
</html>
Thanks in advance.
You should create an application and define your controller through that app:
<html ng-app="sampleApp">
...
<script type="text/javascript">
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller("sampleController", function($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
});
</script>
...
The support for global controls is removed from angular 1.3, if you are using version till 1.2, it should work, see this working Fiddle
var myApp = angular.module('myApp',[]);
function sampleController($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
If you are using angular 1.3, global controller should not work, see this fiddle with angular 1.3
Use following code if you need to use angular version 1.3:
var myApp = angular.module('myApp',[]);
myApp.controller('sampleController',function($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
})
See this Fiddle
It's better to declare the app and controller declaratively.
The next code works:
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>
<body ng-controller="SampleController">
<div>
<h2>Adding a sample controller</h2>
<ul>
<li ng-repeat="cust in customers">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app= angular.module('MyApp',[]);
app.controller('SampleController', function ($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
);
</script>
</body>
</html>
Both the answers posted can be used.
In both usages, the recommended approach is to inject $scope and use that (rather than using this, which you can do in the second approach as well).
The difference between approach one and two is in how to support minification. In the former, you can supply an array of injected arguments, whereas in the latter you modify $inject. This is of course a bit technical but it is highly recommended to support minification. See A note on minification in the documentation.
The former also does not name the function in the global scope, which is generally a good thing!
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>