How to return values based on an id array in AngularJS
Question
This problem is really hard to replicate because it seems almost random, but here is a basic example of what I am trying to do, I think i'm not doing it the best way in AngularJS which is why I am running into problems.
index.html
<!doctype html>
<html ng-app="test">
<head>
<meta charset="utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="main">
<pre>numPeopleInProfession('Graphics') {{numPeopleInProfession('Graphics') | json}}</pre>
<pre>numPeopleInProfession('Psychology') {{numPeopleInProfession('Psychology') | json}}</pre>
</body>
</html>
app.js
var app = angular.module('test', []);
app.controller('main', function($scope){
$scope.people = [
{
'name':'Jordan',
'profession':'Graphics'
},
{
'name':'Amber',
'profession': 'Psychology'
},
{
'name':'Megan',
'profession': 'Graphics'
}
]
$scope.numPeopleInProfession = function(profession) {
var numPeople = 0;
for(var i=0; i<$scope.people.length; i++) {
if($scope.people[i].profession == profession) {
numPeople+=1;
}
}
console.debug(numPeople);
return numPeople;
};
});
As you can see the data i'm trying to output is not a simple variable, it's a variable that needs to be calculated on the fly (in the real world environment the JSON data is being pulled from a Firebase backend).
The console.debug() logs the correct number of people in each profession, however when I hard refresh the page sometimes the correct number shows up, and sometimes it's 0.
It's really hard to get to the root of the problem because it seems to be random when it shows up as 0 and when it shows the return value of the function.
Is there a better way to do this in AngularJS? I'm really new to Angular & might be approaching this in the wrong way.
I have a feeling it has something to do with the scope / DOM not being fully updated before it fires the function.
1 answers
solution1
0 2015-05-07 02:22:05
If you load the data with the standard Firebase JS API, when the sync is finished, you should use a $scope.$apply(); to tell your app that the view data is changed.
If you use the AngularFire API, it is not needed.
I created a working Plunker here , you just have to set the peopleUrl var with the URL of your firebase.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.