CODEWITHSUNDEEP
javascriptangularjs
SimonML
SimonML

Reputation: 3

Using directives inside an ng-repeat

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

Upvotes: 0

Views: 564

Answers (1)

Divya MV
Divya MV

Reputation: 2053

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

Upvotes: 1

Related Questions