具有动态ng-repeat项名称的可重用指令

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

我的指令html

<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

现在我的问题是，当JSON为1级时，它将如下所示工作

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

但是如果我有两个级别的JSON，那就不行。

[{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]}}

那么，如何使该部分动态{item[textField]}}

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

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

1 个解决方案

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

有了您的这种动态表达式，指示只考虑作为视图模型提供的特定契约总是更好的。如果指示使用者有不同的数据格式，那么应该是upto那个组件来提供指示需要的契约，它可以将数据映射到指令期望的视图模型。这样你就能保持东西干净，这就是我的看法。

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

现在，要解决您的问题，您需要使用一种技巧来针对对象评估多级属性。你可以使用美元范围。$eval对作用域对象的任何动态表达式求值。例如，您可以评估prop1.prop2的动态属性评估。通过执行$scope对范围属性项的prop3 .$eval(“prop1.prop2”)。prop3”项)或范围。美元eval(“项目”。+“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

Plnkr

#1