Question

这个问题真的难以复制，因为它似乎几乎是随机的，但这是我想要做的一个基本的例子，我想我不是在AngularJS中做到最好的方式，这就是为什么我是遇到问题。

的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;
    };

});

正如您所看到的，我尝试输出的数据不是一个简单的变量，它是一个需要动态计算的变量（在现实环境中，JSON数据是从Firebase后端。）

console.debug（）记录每个职业的正确人数，但是当我硬刷新页面时，有时会出现正确的数字，有时它会显示0。

很难找到问题的根源，因为当它显示为0并且显示函数的返回值时它似乎是随机的。

在AngularJS中有更好的方法吗？我对Angular＆amp; amp;可能是以错误的方式接近这个。

我觉得它在触发函数之前与scope / DOM没有完全更新有关。

Answer 1

如果使用标准Firebase JS API加载数据，则在同步完成后，您应使用$scope.$apply();告诉您的应用视图数据已更改。

如果您使用AngularFire API，则不需要它。

我创建了一个有效的Plunker here，您只需要使用firebase的URL设置peopleUrl var。

如何根据AngularJS中的id数组返回值

1 个答案: