I am having trouble declaring 2 controllers in 1 app. My guess is it's a syntax error, but not totally sure.
The error message I receive is that "people is not defined".
//this is my app file
var myApp = angular.module('myApp',[]);
myApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
myApp.controller('controller1', function($scope) {
var pets = [
{animal: "dog", years: "3 Years"},
{animal: "dog", years: "1 Years"},
];});
myApp.controller('controller2', function($scope) {
var people = [
{name: "john", bday: "september"},
{name: "nancy",bday: "december"},
];
});
On my html page, I am simply writing some javascript that attempts to get the length of the people array.
var totalpeople = people.length;
Note: Not sure if this is important information, but I declare my app in the html tag.
update: here some some basic pseudo code on my html page.
<html ng-app="myApp">
<head>
<script>
var totalpeople = people.length;
</script>
</head>
<body>
<div ng-controler="controller1">
<table><tr ng-repeat="rows in pets">
<td>{[{pets.animal}]}</td><td>{[{pets.year}]}</td>
</tr>
</div>
<div ng-controler="controller2">
<table><tr ng-repeat="rows in people">
<td>{[{pets.name}]}</td><td>{[{pets.bday}]}</td>
</tr>
</div>
<div>
<table><tr>
<td><script>//not actually doing this, but totalpeople goes here </script></td>
</tr>
</div>
</body>
3 Answers 3
There were a lots of errors in the html as well as in the script section. Like you have mispelled the ng-controller to ng-controler. And, ng-repeat logic is all wrong.You have missing table tags and more. I don't know why you would want to interpolate {{}} to use {[{}]}.
Here is the working plunker: http://plnkr.co/edit/qs7mCrmElXGqGHdKAmNH?p=preview
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="controller1">
<table><tr ng-repeat="rows in pets">
<td>{[{rows.animal}]}</td><td>{[{rows.years}]}</td>
</tr>
</table>
Total pets:{[{count}]}
</div>
<div ng-controller="controller2">
<table><tr ng-repeat="rows in people">
<td>{[{rows.name}]}</td><td>{[{rows.bday}]}</td>
</tr>
</table>
</div>
<br>
Total Pets:
<span id="show"></span>
<script>
var myApp = angular.module('myApp',[]);
myApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
myApp.controller('controller1', function($scope) {
$scope.pets = [
{animal: "dog", years: "3 Years"},
{animal: "dog", years: "1 Years"}
];
$scope.count = $scope.pets.length;
document.getElementById('show').innerText=$scope.count;//use directive to achieve this,using jquery inside controller is bad practise. Used just for the purpose of demo.
});
myApp.controller('controller2', function($scope) {
$scope.people = [
{name: "john", bday: "september"},
{name: "nancy",bday: "december"},
];
});
</script>
</body>
</html>
5 Comments
On my html page, I am simply writing some javascript that attempts to get the length of the people array.
Are you sure you expect people to be available in the global scope (i.e. a property of window object)?
Now let's simplify the code as follows:
function doStuff() {
var people = "whatever";
}
doStuff();
// Is "people" variable available?
The answer is no, it's not available because it's a doStuff function local variable.
This isn't an Angular-specific issue, but it's how variable scoping works in JavaScript (and practically in any language).
Actually, Angular tries to avoid adding garbage to the global scope and you need to use built-in data-binding to show values in your UI.
Comments
Why would you need to write javascript in your view to get the length?
$scope.people = [
{name: "john", bday: "september"},
{name: "nancy",bday: "december"},
];
Can then just do people.length in your view.
Seeing the context that you are trying to call it would help though.
people.peopleorpetsin your controllers. You would want to declare them asthis.peopleandthis.petsrespectively.