如何在 angularjs 中以正确的方式在指令中使用 ng-repeat

Question

Plunkr

我使用 angular 自定义指令做了一个 自动填充下拉菜单。一切正常。 但我想让这个指令可重用！！！！

目前我的指令严格依赖于所选项目的 Id 和 Name 属性。

我想分配 text 属性（我想将文本绑定到列表项 html 中）和 value 属性（将在我的应用程序控制器中可用），例如 textfield="Name" 和 value-field=" ID”。

想象一下，如果我的数据对象不包含 Name 或 Id 属性，我的 指令不起作用。

HTML：

<autofill-dropdown items="searchCurrencies"
   textfield="Name" valuefield="Id" selected-data="Id" urllink="/api/SetupCurrency/Autofill?filter=">
</autofill-dropdown>

模板：

<div class="pos_Rel">
   <input placeholder="Search Currency e.g. doller,pound,rupee" 
     type="text" ng-change="SearchTextChange()" ng-model="searchtext" 
     class="form-control width_full" />

   <ul class="currencySearchList" ng-show="IsFocused && items.length">
      <li class="autofill" ng-repeat="item in items" ng-click="autoFill(item)">
         {{item.Name}}
      </li>
   </ul>
</div>

所以，最后我要完成什么，我要绑定 Name 属性（或其他，取决于我为“文本字段”属性设置的值 到我的 html 上）到列表项，每当用户选择一个项目时，它都会给我选择的 Id（或 其他属性，取决于我为“value-field”属性设置的值 到我的 html 上）。

Plunkr Here

更新：

我认为我的问题不太清楚。 我已经写了 2 次相同的指令来完成，也写了 2 次相同的模板 :( 请查看我更新的 plunkr。

Updated Plunkr

Answer 1

我想说我不确定我是否以正确的方式理解了你的问题，所以我试着重复一遍。

textfield="Name" valuefield="Id" selected-data="Id"

1. 您想要存储自定义指令的选定项的属性的值。
2. 值应存储在属性“textfield”中提供的变量中
3. 属性“valuefield”应定义所选对象的属性的名称

如果是这种情况，您必须摆脱 valuefield 的双向数据绑定。因为您只想提供一个字符串（如“Id”或“Name”）。

我又修改了你的 plunkr。首先我创建了新的作用域变量：

scope: {
        'items': '=',
        'urllink':'@',
        'valuefield':'@',
        'textfield':'=',
        'Id':'=selectedData'

    }

Valuefield 现在只是一个文本绑定。因此，如果您想以角度方式更改它，则必须在指令之外提供一个范围变量，并在内部提供一个“=”双向绑定：D

$scope.autoFill = function (item) {
            $scope.IsFocused = false;
            $scope.searchtext = item.Name;
            $scope.Id = item.Id;
            $scope.textfield = item[$scope.valuefield];
        }

我还将最后一个表达式添加到您的自动填充函数中。属性的名称（值字段）将写入与您的外部范围链接的文本字段变量（在本例中为“名称”）：

textfield="Name"

如果这不是你问的，我很抱歉，但我是 stackoverflow 的新手，我仍然无法评论：P

https://plnkr.co/edit/zE1Co4nmIF3ef6d6RSaW?p=preview