AngularJS add incremental value

Question

Можно ли добавить инкрементный идентификатор в ng-model в AngularJS?

Я повторяю список элементов, а для атрибута ng-model = "" для каждого элемента в цикле требуется и добавочное значение, или если есть более простой способ, я бы хотел услышать Это.

Что я сейчас пытаюсь:

  <li ng-repeat="recipe in recipes"> 
       <label for="cost_ingredient_{{recipe.ingredient_id}}" style="font-size: 16px;">{{recipe.ingredient}}</label> 
       <input ng-model="{{recipe.model_name}}" name="formcost_ingredient_{{recipe.ingredient_id}}" type="number" id="cost_ingredient_{{recipe.ingredient_id}}" min="0" step="0.01" value="0" /> 
      </li> 

Я попытался сделать это с помощью директивы, но когда я называю «FormData» в контроллере, ни один из модельных индексов не придумали.

Мне нужно передать эту информацию как часть представления формы на следующую страницу в процессе. Это будет развернуто на Android, поэтому я просто хочу добавить это в window.sessionStorage, поскольку мне это нужно только один раз, каждый раз, когда пользователь запускает мое приложение.

Answer 1

Попробуйте использовать $index свойство генерировать уникальный идентификатор:

<div ng-repeat="item in items"> 
    <span id="unique_ID_{{ $index }}">{{ item }}</span> 
</div> 

http://plnkr.co/edit/SPeyIb2dGxPpL3yKykr6?p=preview

Answer 2

На итерации, установите идентификатор в повторителе с нг-инициализации. Это изменит вашу исходную структуру, и идентификатор будет доступен за пределами репитера.

<li ng-repeat="recipe in recipes" > 
    <label ng-init="recipe.someId = $index" for="cost_ingredient_{{recipe.someId}}" > 
     {{recipe.ingredient}} 
    </label> 
    <input ng-model="{{recipe.model_name}}" name="formcost_ingredient_{{recipe.someId}}" 
      type="number" id="cost_ingredient_{{recipe.someId}}" 
      min="0" step="0.01" value="0" /> 
</li> 

Это похоже на ответ Михала Stefanow, за исключением здесь вы на самом деле изменить структуру, добавив атрибут каждого элемента, в данном случае это называется someId

Другой способ:

<li ng-repeat="recipe in recipes" > 
    <label ng-init="recipe.costIngredient = 'cost_ingredient_' + $index" for="{{recipe.costIngredient}}" > 
     {{recipe.ingredient}} 
    </label> 
    <input ng-model="{{recipe.model_name}}" 
      ng-init="recipe.formcostIngredient = 'formcost_ingredient_' + $index" name="{{recipe.formcostIngredient}}" 
      type="number" id="{{recipe.costIngredient}}" 
      min="0" step="0.01" value="0" /> 
</li> 

Вы действительно хотите предварительно обработать это на стороне JavaScript, чтобы он не оценивался каждый раз:

$scope.recipes = [ your array here ]; 

angular.forEach($scope.recipes, function(recipe, index){ 

    recipe.costIngredient = 'cost_ingredient_' + index; 
    recipe.formcostIngredient = 'formcost_ingredient_' + $index; 

}); 

, затем повторите это.

P.S. вы можете захотеть изучить использование ng-bind, а не {{}} для генерации HTML, лучше для непредвиденных ошибок