Reusable directive with dynamic ng-repeat item name

Question

Reusable directive with dynamic ng-repeat item name

I have created reusable directive something like dropdown but dropdown open in modal which is working good.

my directive looks like this

<p-select items="deptStations" header-text="Select " text="Select departure..." text-icon="ion-chatbubble-working" text-field="City_Name_EN" text-field2="City_Code" value-field="City_Code" ng-model="deptStation.value">
</p-select>
<p-select items="arrStations" header-text="Select " text="Select arrival..." text-icon="ion-chatbubble-working" text-field="D.City_Name_EN" text-field2="D.City_Code" value-field="D.City_Code" ng-model="arrStation.value">
</p-select>

My directive html is

<ion-content>
      <div class="list">
        <label ng-repeat="item in items | filter:search" class="item item-text-wrap" ng-click='validateSingle(item)'>
          {{item[textField]}} {{textField2 !== '' ? " (" + item[textField2] + ")" : ""}}
        </label>
      </div>
</ion-content>

Now my issue is when JSON is 1 level it will work as below

[{City_Name_EN:'Abu Dhabi', City_Code:'AUH' },
 {City_Name_EN:'Alexandria',City_Code:'HBE' }]

But if I have 2 level JSON than it will not work

[{D:{City_Code:'AMM',City_Name_EN:'Amman'},
 D:{City_Code:'BKK',City_Name_EN:'Bangkok'}}]

So how can make this part dynamic {{item[textField]}}

My plunkr http://plnkr.co/edit/GxM78QRwSjTrsX1SCxF7?p=preview

javascript
angularjs
angularjs-directive
angularjs-ng-repeat
ionic-framework

Answer 1

With this kind of dynamic expression of yours, it is always better to have directive consider only a specific contract provided as view model. If the directive consumer has a different data format it should be upto that component to provide the contract that directive needs, it can just map the data to the view model that directive expects. This way you can keep things clean, that would be my opinion.

Now to work around your issue you would need to do a trick to evaluate the multilevel property against an object. You can use $scope.$eval to evaluate any dynamic expression against the scope object. example you can evaluate a dynamic property evaluation of prop1.prop2.prop3 on a scope property item by doing $scope.$eval("prop1.prop2.prop3", item) or $scope.$eval("item." + "prop1.prop2.prop3")

So in your directive:

Added a scope function to get the item text and value:

$scope.getItemName = function(field, item){
   //here "this" represents the current child scope of ng-repeat
   return $scope.$eval(field, item);
   //return this.$eval("item." + field); 
}

and

 $scope.validateSingle = function(item) {
      $scope.text = $scope.$eval($scope.textField, item) + ($scope.textField2 !== '' ? " (" + $scope.$eval($scope.textField2, item) + ")" : "");
      $scope.value = $scope.$eval($scope.valueField, item);

     ...

Update your template to get respective text:

    <label ng-repeat="item in items | filter:search" class="item item-text-wrap" ng-click='validateSingle(item)'>
      {{getItemName(textField, item)}} {{textField2 !== '' ? " (" + getItemName(textField2, item) + ")" : ""}}
    </label>

Plnkr