AngularJS - cannot reference $index inside ng-model using a directive

Question

I am currently facing an issue whereby I would like to generate a dynamic number of input forms and also name them dynamically (as defined by a JSON) so that I can reference them separately.

For example, if my JSON object had three items in it, I would generate three input boxes with ng-model="1", ng-model="2" and ng-model="3" respectively. In real life the ID's will come from the JSON itself.

I'm currently using ng-repeat to generate the forms in a table;

<tr ng-repeat="x in names track by $index">
<td>{{ $index }}</td> <!-- this outputs fine  -->
<td>{{ x.Description }}</td>
<td>{{ x.Metric }}</td>
</tr>

And using a directive & the $compile function to dynamically generate an input form with a unique ng-model name.

app.directive("outDynamic", function($compile){
return{
    link: function(scope, element, attrs){
        var template = "<input type='number' ng-model='" + scope.ray[attrs.element1] + "'>";
        var linkFn = $compile(template);
        var content = linkFn(scope);
        element.append(content);
    }
} });

However: none of the following works (when nested in the ng-repeat)

    <!-- None of these work -->
<td out-dynamic element1=$index></td>
<td out-dynamic element1="$index"></td>
<td> <input type='number' ng-model="array[$index]"> </td>
<td> <input type='number' ng-model="array['$index']"> </td>

Summary of issue;

Every time I try and reference the $index tracker, I get an undefined error in my directive code.

It's defined in the controller as $scope.ray = [], I didn't post the whole code to keep the question short. — chrism202
– chrism202, Commented Feb 26, 2016 at 16:34

Shaishab Roy · Accepted Answer · 2016-02-26 08:47:39Z

1

You should use {{}} to assign $index value for attribute. so use

element1={{$index}} instead of element1=$index

<tr ng-repeat="x in names track by $index">
     <td out-dynamic element1={{$index}}></td>
     <td out-dynamic element1="{{$index}}"></td>
</tr>

I guess your scope.arr is perfect.

PLUNKER DEMO

answered Feb 26, 2016 at 8:47

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chrism202 Over a year ago

Thanks for the answer! That seems to have done the job. It's weird, all the examples I was looking at just referenced $index directly in the quotes.

Collectives™ on Stack Overflow

AngularJS - cannot reference $index inside ng-model using a directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related