有没有办法在ng-repeat中使用angular中的$ index作为模型？

Question

I have a factory that I am pushing values to from my controller my controller.

.factory("Inputs", function(){

    var inputs = {

    };

    inputs.editors = [0];

    return inputs;

})

I want to use $index as the model when I loop through it like so

<div class="texteditors">
    <div class="form-group" ng-repeat="editor in app.inputs.editors">
        <textarea class="form-control" name="{{$index}}" ng-model="inputs.editors[{{$index}}]" id="" cols="30" rows="10"></textarea>
     </div>
</div>

but it won't evaluate, the only way I was able to get it to evaluate is like this:

but now its a string it evaluates to inputs.editors['0']

I want to then loop through the ng-models and evaluate them {{inputs.editors[0]}} to how ever many text areas are added. I am not sure if I explained properly.

Should I use directive to create the binding, how would I be able to evaluate the textareas and models that are being generated from pushing the values to the factory?

Answer 1

You only need the curly brackets when you are dealing with strings. As @DimaGimburg also said, get rid of them in your ngModel.

<div class="texteditors">
    <div class="form-group" ng-repeat="editor in app.inputs.editors">
        <textarea class="form-control" name="{{$index}}" ng-model="inputs.editors[$index]" id="" cols="30" rows="10"></textarea>
     </div>
</div>

Answer 2

Here you go:

http://codepen.io/jlowcs/pen/ogJBVm

A few things were wrong with your markup.

You also need to add track by to your ng-repeat , otherwise you will lose focus every time the model changes because the textarea is recreated by the ng-repeat .

HTML:

<div class="texteditors" ng-controller="MyCtrl as app">
    <div class="form-group" ng-repeat="editor in app.inputs.editors track by $index">
        <textarea class="form-control" ng-model="app.inputs.editors[$index]" id="" cols="30" rows="10"></textarea>
    </div>
    <div class="form-group" ng-repeat="editor in app.inputs.editors track by $index">
        <div>{{app.inputs.editors[$index]}}</vid>
    </div>
</div>

JS:

app.controller('MyCtrl', function($scope, Inputs) {
    this.inputs = Inputs;
})
.factory("Inputs", function(){
    var inputs = {};

    inputs.editors = ['foo', 'bar'];

    return inputs;

})

Answer 3

ng-model expects an angular expression. That means that you don't need the {{}} notation.

<textarea class="form-control" name="{{$index}}" ng-model="inputs.editors[$index]" id="" cols="30" rows="10"></textarea>

On the other hand, name doesn't expect an angular expression. Thats why you needed the {{}} there.