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

How to use ng-repeat inside a directive proper way in angularjs

本文关键字：指令 ng repeat 方式 angularjs      更新时间：2023-09-26

Plunkr

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

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

我想分配文本属性（我想将文本绑定到列表项html中）和值属性（将在我的应用程序控制器中可用），如textfield="Name"和valuefield="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上设置的"text field"属性值）绑定到列表项，每当用户选择一个项目时，它都会给我所选的Id。

Plunkr Here

更新：

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

更新的Plunkr

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

textfield="Name" valuefield="Id" selected-data="Id"
  1. 您希望存储自定义指令的所选项的Property值
  2. 值应存储在属性"textfield"中提供的变量中
  3. 属性"valuefield"应定义所选对象的属性的名称

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

我又更改了你的密码。首先，我制作了新的范围变量：

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];
        }

我还将最后一个表达式添加到了自动填充函数中。属性的名称（valuefield）将被写入与外部范围（在本例中为"名称"）链接的textfield变量：

textfield="Name"

如果这不是你所要求的，我很抱歉，但我是斯塔科韦弗洛的新手，我仍然无法评论：p

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

相关文章：