Как добавить повторяющийся элемент в массив в Angular

Question

Я работаю над школьным проектом. Я создал несколько строк с ng-repeat. Теперь, когда я хочу, чтобы добавить их с 'addElementsByClassName' 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.

Например:

1. Вместо $ использования Область применения: controllerAs View Syntax

2. следуйте правилам: JavaScript Style Guide and Coding Conventions

Answer 2

Вы не давая цикла Угловая переваривать любое время, чтобы бежать ,

Мне нужны мои строки внутри этого массива, поэтому я могу что-то с ними сделать позже.

Попробуйте извлечь счетчик строк прямо перед тем, как использовать «позже». Он должен быть обновлен. Если нет, попробуйте использовать $ scope. $$ apply(), чтобы вызвать цикл дайджеста.