Question

是否可以在AngularJS中为ng-model添加增量标识符？

我正在迭代一个项目列表，并且需要和ng-model的一个增量值=＆＃34;＆＃34;循环中每个项目的属性，或者如果有更简单的方法，我希望听到它。

我目前正在尝试的内容：

            <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>

我尝试用指令做这件事，但是当我打电话给＆＃39; formData＆＃39;在控制器中，没有一个模型索引出现。

我需要将此信息作为表单提交的一部分传递回流程中的下一页。这将部署到Android，所以我想把它添加到window.sessionStorage，因为我每次用户运行我的应用程序时只需要一次。

Answer 1

尝试使用$index属性生成唯一ID：

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

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

Answer 2

迭代时，使用ng-init在转发器中附加一个id。这将修改您的原始结构，ID将在转发器外部提供。

<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>

这类似于Michal 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，这对于无法预料的错误更好

AngularJS添加增量值

2 个答案: