Angular JS - Ng-Repeat providing li's but not data inside - javascript

I have the following code usage of ng-repeat, I am getting 3 blank <li/> but not data within of 3 populations. Can someone help why?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in Cities">{{population}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Cities = [{population:'10,200'},{population:'20,000'},{population:'30,000'}];
});
</script>
</body>
</html>

I think it should be:
<li ng-repeat="x in Cities">{{x.population}}</li>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in Cities">{{x.population}}</li>
</ul>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.Cities = [{population:'10,200'},{population:'20,000'},{population:'30,000'}];
});
</script>
</body>
</html>
You just forgot (x.population) otherwise it was OK.

Related

Angular does not show output

Have tried every solution on stackoverflow but it does not solve my problem,
my output is not showing.
The output does appear in logs and everywhere else but due to some reason angular is unable to render it.
In my real scenario i will be receiving data from a server and i have mimicked the object structure i will be getting in the 'controller.js' file
Html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="application.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller.js
var app=angular.module('application', []);
app.controller("controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
Application.js
var app = angular.module("application", []);
app.run(function(){
console.log("App running!");
});
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="_controller">
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</div>
<script>
var app=angular.module('application', []);
app.controller("_controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
app.run(function(){
console.log("App running!");
});
</script>
</body>
</html>
Syntax error in console.log, missing leading quote on App running.
//script.js
var app = angular.module("application", []);
app.run(function() {
console.log("App running!");
});
app.controller("controller", function($scope) {
var d = [{
'Task': 'Say hi!',
'Status': 'failed'
}];
$scope.t = d[0].Task;
$scope.s = d[0].Status;
console.log("Task", $scope.t);
console.log("Status", $scope.s);
});
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
You have mistake in this line
console.log(App running!");
You forgot one "
that should be
console.log("App running!");
Solving that your code works fine.

Why parseInt on a variable using expression does not display $scope variable?

Here is my code,
WORKING CODE
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{value}}</h1>
</div>
</body>
</html>
NOT WORKING CODE:
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{parseInt(value)}}</h1>
</div>
</body>
</html>
Normally using parseInt on an expression should work, what is the issue here?
You have to parse the value in the controller since angular is not able to parseInt into an Angular expression:
In the other hand if you really want to make this in the DOM one of the best options is to use an angular filter like:
var app = angular.module("app", []);
app.filter('parseInt', function() {
return function(value) {
return parseInt(value);
};
});
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1>{{(value | parseInt) + 44}}</h1>
</div>
</body>
</html>
As per the doc
https://docs.angularjs.org/guide/expression
Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.
For the question about why it does not display check this
https://docs.angularjs.org/guide/interpolation
if the interpolated value is not a String, it is computed as follows:
undefined and null are converted to ''
Since ParseInt in not available inside interpolation, it is undefined and so is the displayed value.
you will have to create your own function in the controller $scope.
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",function($scope) {
$scope.value = '20';
$scope.parseInt = function(value)
{
return parseInt(value);
}
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{parseInt(value)}}</h1>
</div>
</body>
</html>

How to use AngularJS $scope?

I have a paragraph and a counter. I want to update the counter when someone clicks on the paragraph using AngularJS. I wrote the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p>Click on this paragraph.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$ang=$scope;
$ang.count=10;
});
$(document).ready(function(){
$("p").click(function(){
console.log("The paragraph was clicked.");
$ang.count=$ang.count-1;
});
});
</script>
</body>
</html>
But it's not working. I guess I'am using $scope in a wrong way but I am not sure how to fix it.
Don't mix angular with jQuery!
Rather follow angular way of doing it, Wrap all things in angular context just by moving ng-app & ng-controller directive on body and have and then place ng-click on p tag and do your desired task there
Markup
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-click="increamentCount()">Click on this paragraph.</p>
<div>
<h2>{{ count }}</h2>
</div>
<body>
Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.increamentCount = function(){
$scope.count = $scope.count + 1;
}
});
Demo Plunker
It is should be:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="click()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.click = function(){
$scope.count=$scope.count-1;
}
});
</script>
</body>
</html>
You had several errors in your code. I've refactored it a bit. Make sure to use ng-app and ng-controller properly. Do not use jquery in combination with angular. You can observe scope changes with the $watch function - this method is expensive in terms of computation and should not be overused.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p ng-click="onClick()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
</div>
<script>
angular
.module('myApp', ['ng'])
.controller('myCtrl', function($scope) {
$scope.count = 10
$scope.onClick = function () {
$scope.count--
}
// this is how you can observe state
// changes outside of event handlers
$scope.$watch('count', function(newValue, oldValue) {
console.log("The paragraph was clicked.")
})
})
</script>
</body>
</html>

html and script tag not linking

I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h4>{{ "data.message"}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js file is
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h4>{{data.message}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
Note: You should not have quotes("") in your expressions or else, it will be treated at string.
Move these links inside tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script type="text/javascript" src="main.js"></script>
and you cannot use $scope with module and controller this must be
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = {"message": panel};
});
and in html
<div ng-app="myApp">
to first div
and use
{{data.message}}

Angular : Bootstrap giving error in console

Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script type="text/javascript">
angular.bootstrap(document, ['myApp1','myApp']);
</script>
</body>
</html>
Although i can see the expected output, but at the same time facing console error.
here is the description of error
(while i click on the url)
it says it already bootstrapped so i remove the 'myApp' from .bootstrap function, but that didnt work.
Please help.
You are doing both ng-app declarations and angular.bootstrap(document, ['myApp1','myApp']);.
You need to choose only one method, otherwise you get the well descripted error of multiple bootstrapped applications.
The problem is as explained in the previous comments, the automatic and manual initialization of modules.
Since you want to initialize them separately for each elements then try an approach like
<div data-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name"/>
</p>
<h1>Hello {{name}}</h1>
</div>
<div data-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
then
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
var els = document.querySelectorAll('[data-app]');
for (var i = 0; i < els.length; i++) {
angular.bootstrap(els[i], [els[i].dataset.app]);
}
Demo: Fiddle

Categories