Question

我正在研究一个学校项目。我用ng-repeat创建了一些行。现在，当我想添加＆amp; addElementsByClassName＆＃39; arraylength仍为0。

这是我的html：

<tr class = "ingredient" ng-repeat = "i in data.Ingredients">
    <td>{{ i.Ingredient.Name }}</td>
    <td>{{ i.Ingredient.Amount_g }}</td>
</tr>

这是在我的控制器中：

    $scope.allIngredients = [];
    $scope.dashboard = MainService.getDashboard ();

    $scope.dashboard.then (function (data) { //receive the data from a server via MainService
        $scope.data = data;
        $scope.allIngredientRows = document.getElementsByClassName ('ingredient');
        console.log ($scope.allIngredients.length);
    });

我希望我的行在该数组中，以便稍后我可以使用它们。但是现在数组的长度仍为0。

Answer 1

＃1 您的方法是错误的。您应该对数据进行操作，而不是对html元素进行操作。试试这个：

HTML：

<tr ng-repeat="item in ingredients">
    <td>{{ item.Ingredient.Name }}</td>
    <td>{{ item.Ingredient.Amount_g }}</td>
</tr>

控制器：

$scope.ingredients = [];

MainService.getDashboard().then (function (data) {
    $scope.ingredients = data.Ingredients;

    console.log ($scope.ingredients.length); // Amount of your ingredients
});

如果要添加更多项目，请使用：

$scope.ingredients.push(newIngredient);

或

$scope.ingredients = $scope.ingredients.concat(newIngredients);

＃2 建议

但我建议你阅读angular.js的良好做法，javascript中的命名约定，并考虑你的json结构。

例如：

使用controllerAs View Syntax
遵守以下规则：JavaScript Style Guide and Coding Conventions

Answer 2

您无法在任何时间运行Angular摘要周期。

我希望我的行在该数组中，以便稍后我可以使用它们。

尝试在此之前检索行计数＆＃39;稍后＆＃39;使用。它应该更新。如果没有，请尝试使用$ scope。$$ apply（）来引发摘要周期。

如何在Angular中向数组添加重复元素

2 个答案: