Question

我试图让一个非常简单的ng-repeat处理重复中的指令，这些指令具有基于重复项的属性值。

我已经在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>

但这只是把文字＆＃34; tagName＆＃34;在每一行。

我尝试编写自己的指令（包括对MassAutocomplete的一些自定义更改），这样我就可以写：

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

指令是：

.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>'
    }
})

但是使用{{tagk}}时，ng-model部分会混乱（如果我使用文字，那就很好）。我还没有在最后工作时获得方法绑定。

我非常肯定我可以使用一些聪明的变量范围来实现这一点，但我发现doco对此非常困惑。

我可以使用没有自定义指令的纯ng-repeat执行此操作，还是可以对我的自定义指令进行更改以使其生效？

我的目标输出（给定的tagNames = [＆＃34;主机＆＃34;，＆＃34;用户＆＃34;，＆＃34;方法＆＃34;]）是：< / p>

<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可用here

Answer 1

以下是正确的版本。

          <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('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是plunker http://plnkr.co/edit/QeFOHqM1oYtif47RKDFa?p=preview

在ng-repeat中使用指令

1 个答案: