In my angular.js project I have the folowing:
{{ myString }}
Now when the value ofmyString is "#", The html output is as follows:
[Object][object]
How can I get round this?
I created the following example and the "#" is being displayed in the view. I can't duplicate the issue that you described. Can you provide more details?
Here's the code I used to display the "#".
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body ng-controller="myCtrl">
Hello
{{myString}}
</body>
</html>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope){
myScope = $scope;
$scope.myString = "#";
});
</script>
Related
I created a basic AngularJS app and it's not displaying the values on the live site declared on the controller.
The live site displays the expressions written on the controller file instead.
ie. - It displays:
{{ title }}
{{ paragraph }}
Instead of:
First Angular Title
First Angular Paragraph
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Application</title>
<script src="js/shared/angular.min.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainController">
<h1> {{ title }} </h1>
<p> {{ paragraph }}<p>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
MainController.js
app.controller("MainController", ['$scope', function($scope) {
$scope.title = "First Angular Title";
$scope.paragraph = "First Angular Paragraph";
}]);
app.js
var app = angular.module("mainApp", []);
I don't know what I'm doing wrong. I'm completely new to this. I appreciate any help. Thanks for your time.
I have included the angular from cdn and updated the inline script the same working. please verify included files are loading properly.
<!DOCTYPE html>
<html>
<head>
<title>Angular Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainController">
<h1> {{ title }} </h1>
<p> {{ paragraph }}<p>
</div>
<!-- Modules -->
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller("MainController", ['$scope', function($scope) {
$scope.title = "First Angular Title";
$scope.paragraph = "First Angular Paragraph";
}]);
</script>
</body>
</html>
</body>
</html>
I am new to angularjs and have written a small program but facing the error "scope.detailsForm" as undefined. Could someone help me what is the issue with the below code.
b.js file:
var app = angular.module('my-app', []);
app.controller("my-cont", function($scope) {
$scope.detailsForm.clickme.$setValidity("error1",true);
});
b.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body ng-app="my-app" ng-controller="my-cont">
<form method="get" name="detailsForm" ng-model="detailsForm">
<button name='clickme' ng-disabled="detailsForm.clickme.$error.error1">Click Me!</button>
</form>
</body>
</html>
Your problem is that you can not get it when the controller is not built, you need to wait for the html to be processed by Angular. Here's an example.
As you'll see in the console, the first log will echo undefined, and the second will echo the form.
var app = angular.module('MyApp', []);
app.controller("MyCont", ['$scope', function($scope) {
console.log($scope.detailsForm);
$scope.onClicked = function()
{
console.log($scope.detailsForm);
}
}]);
Can someone tell me why the hell this plunker is not working?
Sample AngularJS on Plunker
HTML :
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<p>{{userData}}</p>
</body>
</html>
JavaScript:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.userData = {
name: 'Xavier',
age: 25
}
});
you forgot to put ng-app.
<html ng-app="myApp">
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>
What is wrong?
<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller='someController'>
<p>{{someData}}</p>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
<script>
$(function(){
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
})
})
</script>
</body>
</html>
And error message in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.7/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.7%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...2) angular.js:36
But examples from the official site are working normal. I can't see the serious difference.
Change:
var app = app.module('SOO', ['ngRoute']);
To:
var app = angular.module('SOO', ['ngRoute']);
And remove the jQuery document ready handler that is wrapping your code:
<script>
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
});
</script>
From the documentation:
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root.
Just remove Jquery statement $(function(){}), then everything works fine.
<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller='someController'>
<p>{{someData}}</p>
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
<script>
var app = angular.module('SOO', ['ngRoute']);
app.controller('someController', function($scope){
$scope.someData = 'Ok, all good!';
});
</script>
</body>
</html>