Question

我正在尝试基于一个异步填充的数组生成多个div。

<div ng-controller=visCtrl>
    {{categories}} <!-- prints nothing -->
    <div ng-repeat="item in categories">
        some test text

    </div>
</div>

在一段时间后填充类别。

但是没有生成div，因为categories在调用它时是空的。

如何生成多个div？

这是控制器代码：

var myApp = angular.module('myApp', ['ui.utils']);
//some lines clipped in between
myApp.controller('visCtrl', function($scope) {
    d3.csv($scope.dataFile,function(d){
        $scope.opendata=d;  



        var obj=$scope.opendata[0];
        $scope.categories=[];
        for(var key in obj){
            if(key!=="STATE/UT"&&key!=="DISTRICT"&&key!=="YEAR"){
                $scope.categories.push(key);
            }
        }
        console.log($scope.categories);

    });
});

Answer 1

<div ng-repeat="item in categories">
    some test text
</div>

这段代码很好。 ng-repeat更改时，categories应更改DOM。如果它没有，那么角度不知道这些变化。

首先，请确保您分配到正确的categories（$scope上的那个，而不是本地变量或其他内容）。

接下来，如果您通过jQuery AJAX调用（例如）填充它，那么它将超出角度的生命周期。你需要通过调用$scope.$apply()告诉它事情发生了变化。请阅读此内容，例如：https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()

Answer 2

您已将d3回调与控制器混淆了。当您的ng-repeat触发时，$ scope.categories未定义。之后创建它不会更新ng-repeat。您需要在控制器中创建阵列。然后ng-repeat将观察该数组，当它在d3.csv（）回调中发生变化时，ng-repeat将相应地更新。

var myApp = angular.module('myApp', ['ui.utils']);
//some lines clipped in between
myApp.controller('visCtrl', function($scope) {
    $scope.categories=[];


    d3.csv($scope.dataFile,function(d){
        $scope.opendata=d;  

        $scope.categories.length = 0;

        var obj=$scope.opendata[0];
        for(var key in obj){
            if(key!=="STATE/UT"&&key!=="DISTRICT"&&key!=="YEAR"){
                $scope.categories.push(key);
            }
        }
        console.log($scope.categories);

    });
});

Answer 3

由于某种原因，我无法再发表评论。无论如何，您是否在控制台输出中获取数据？为什么不使用任何表达式将数据转储到div中？尝试输出一些东西，看它是否有效。

此外，您可以尝试在实例化时将项目放入数组中。这样，如果它仍然不起作用，那么在填充它之前，你就会知道你的关于它的理论是不是很正确。

Answer 4

<div ng-controller=visCtrl>
    {{categories}} <!-- prints nothing -->
    <div ng-if="categories && categories.length > 0">
        <div ng-repeat="item in categories">
        some test text
        </div>
    </div>
</div>

你可以把ng-if放在重复上，但这似乎是不必要的，因为它会全部发生。

要清楚，这可以回答您的问题。但很可能不是你的问题。

编辑：

尝试在你的循环之后放一个$ scope。$ apply。

for(var key in obj){
            if(key!=="STATE/UT"&&key!=="DISTRICT"&&key!=="YEAR"){
                $scope.categories.push(key);
            }
        }
$scope.$apply();

如何在填充数据时调用ng-repeat？

4 个答案: