Using directives inside an ng-repeat

Question

I'm trying to get a pretty simple ng-repeat working with directives within the repeat that have attribute values based on the repeated items.

I've tried the suggestion in calling an angularjs attribute directive from inside an ng-repeat:

<tr ng-repeat="tagName in tagNames">
  <th>{{tagName}}</th>
  <td><div mass-autocomplete><input type="text" ng-model="tag.tagName" 
           mass-autocomplete-item="tag_options_fn" 
           dynamic-options="tagName" /> RE? 
       <input type="checkbox" ng-checked="re.tagName"/>  
       {{tagValuesMatchCount(tagName)}}</div></td>
</tr>

But this just puts the literal "tagName" in every row.

I tried writing my own directive (including some custom changes to MassAutocomplete), such that I could write:

<tr ng-repeat="tagName in tagNames">
  <td>{{tagName}}</td>
  <td><div tag-selection tagk="{{tagName}}"/></td>
</tr>

Directive is:

.directive('tagSelection', function() {
    return {
        scope: {
            tagk: '@'
        },
        template: '<div mass-autocomplete><input type="text" \
             ng-model="tag.{{tagk}}" \
             mass-autocomplete-item="tag_options_fn" \
             dynamic-options="{{tagk}}"/> RE? \
             <input type="checkbox" ng-checked="re.{{tagk}}"/> \
             {{tagk}}</div>'
    }
})

But the ng-model part messes up whilst using the {{tagk}} (it's fine if I use a literal). I also haven't got the method binding at the end working.

I'm pretty certain I can get this working using some clever variable scoping, but I find the doco quite confusing on this.

Can I do this using a pure ng-repeat without a custom directive or are there changes I can make to my custom directive to get this to work?

The output I'm aiming for from this (given tagNames = ["host","user","method"]) is:

<tr>
    <th>host</th>
    <td><div mass-autocomplete><input type="text" ng-model="tag.host" 
          mass-autocomplete-item="tag_options_fn" 
          dynamic-options="host" /> RE? 
          <input type="checkbox" ng-checked="re.host"/> 
          {{tagValuesMatchCount("host")}}</div></td>
</tr>
<tr>
    <th>user</th>
    <td><div mass-autocomplete><input type="text" ng-model="tag.user" 
           mass-autocomplete-item="tag_options_fn" 
           dynamic-options="user" /> RE? 
           <input type="checkbox" ng-checked="re.user"/> 
           {{tagValuesMatchCount("user")}}</div></td>
</tr>
<tr>
    <th>method</th>
    <td><div mass-autocomplete><input type="text" ng-model="tag.method" 
           mass-autocomplete-item="tag_options_fn" 
           dynamic-options="method" /> RE? 
           <input type="checkbox" ng-checked="re.method"/> 
           {{tagValuesMatchCount("method")}}</div></td>
</tr>

Plunker available here

Hey, you don't need to wrap each `mass-autocomplete` item with `mass-autocomplete`. You can just set `mass-autocomplete` at the table tag. — haki, Jun 26 '15 at 13:42

Divya MV · Accepted Answer · 2015-02-20T09:29:59.670

1

Following would be the correct Version.

          <tr>
          <td colspan="2"><b>Actual output</b></td>
        </tr>
        <tr ng-repeat="tagName in tagNames">
            <td>{{tagName}}</td>
            <td><div tag-selection tagk="tagName"></div></td>
        </tr>

Directive Definition

   .directive('tagSelection', function() {
            return {

                template: '<div mass-autocomplete><input type="text" ng-model="tag[tagName]" mass-autocomplete-item="tag_options_fn" dynamic-options="{{tagName}}"/> RE? <input type="checkbox" ng-checked="re[tagName]"/> {{tag[tagName]}}</div>'
            }
        })

Here is the plunker http://plnkr.co/edit/QeFOHqM1oYtif47RKDFa?p=preview

edited Feb 20 '15 at 09:29

answered Feb 20 '15 at 06:28

Divya MV

2,021
3
31
55

That just resulted in the literal _tag[tagk]_ in my resulting source, the compiler isn't translating the tagk to the actual value (in this case host/user/method). – SimonML Feb 20 '15 at 06:32
is there any reason for using the `@` in `tagk: '@' `.If `tagk` is a variable in your parent controller scope u could just use `tagk: '='` to get the two way binding. – Divya MV Feb 20 '15 at 06:36
I got the `@` from [here](https://stackoverflow.com/questions/16502559/using-a-directive-inside-an-ng-repeat-and-a-mysterious-power-of-scope). Will sort out a plunker now. Thanks. – SimonML Feb 20 '15 at 07:38
Plunker added to the main question. – SimonML Feb 20 '15 at 08:03
@SimonML check the directive definition updated in the answer – Divya MV Feb 20 '15 at 09:06
Ah, so simple, I just overcomplicated things. Thanks! – SimonML Feb 20 '15 at 23:14

Using directives inside an ng-repeat

1 Answers1