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

Question

Plunkr

我使用 Angular 自定义指令制作了一个自动填充下拉列表。一切正常。但我想让这个指令可重用!!!!

目前，我的指令紧密依赖于所选项目的 Id 和 Name 属性。

我想分配文本属性(我想将文本绑定(bind)到列表项 html 中)和值属性(将在我的应用程序 Controller 中可用)，例如 textfield="Name"和 value-field="ID”。

Imagine If my data object does not contain Name or Id property , my directive would not work.

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>

所以，最后我想要完成的事情，我要绑定(bind) Name 属性(或其他，取决于我为“文本字段”属性设置的值> 到我的 html 上)来列出项目，每当用户选择一个项目时，它都会给我所选的 ID(或其他属性，取决于我为“value-field”属性设置的值 到我的 html 上)。

Plunkr Here

更新:

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

Updated Plunkr

Answer 1

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

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

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

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

我又修改了你的plunkr。首先，我创建了新的范围变量:

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

    }

Valuefield 现在只是一个文本绑定(bind)。因此，如果你想以 Angular 方式更改它，你必须在指令外部提供一个作用域变量，并在内部提供一个“=”双向绑定(bind):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