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

Question

Plunkr

I made a autofill dropdown using angular custom directive .All is working fine. But I want to make this directive reusable !!!!

Currently my directive is tightly depended on Id and Name property of selected item.

I want to assign text property(Which I want to bind the text into list items html) and value property(which will be available in my app controller) like textfield="Name" and 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>

Template :

<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>

So,finally what I want to accomplish , I'm going to bind Name property (or other, depends on what value I set to "text-field" attribute onto my html) to listitems and whenever user select an item, it will give me the selected Id (or other property ,depends on what value I set to "value-field" attribute onto my html).

Plunkr Here

Update:

I think my question not so clear. I have written same directive 2 times to accomplish and also 2 times same template :( Please look through my updated plunkr.

Updated Plunkr

Answer 1

I want to say that I am not quit sure if I understood your question in the right way so I try to repeat it.

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

1. You want to store the Value of the Property of the selected Item of your custom directive.
2. The Value should be stored in the Variable provided in the attribute "textfield"
3. The attribute "valuefield" should define the name of the property of the selected Object

If this is the case you have to get rid of the two-way databinding for your valuefield. Because you only want to provide a String (like "Id" or "Name").

I altered your plunkr again. First of all I made the new scope variables:

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

    }

Valuefield is now only a text binding. So if you want to change it in the angular way you have to provide a scope variable outside of the directive and a '=' twoway binding inside :D

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

Also I added the last expression to your autofill function. The name of the property (valuefield) will be written into the textfield variable which is linked with your outside scope (in this case "Name"):

textfield="Name"

If this is not what you asked I am sorry but I am new to stackoverflow and I still can not comment :P

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