Question

我创建了可重复使用的指令，例如下拉列表，但是在模态下打开下拉列表，这样做效果很好。

我的指令看起来像这个

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

我的指令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>

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

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

但如果我有2级JSON而不能工作

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

那么如何使这部分成为动态{{item[textField]}}

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

Answer 1

通过这种动态表达，最好让指令只考虑作为视图模型提供的特定合约。如果指令使用者具有不同的数据格式，则应该由该组件提供该指令所需的合同，它只能将数据映射到该指令所期望的视图模型。通过这种方式，您可以保持清洁，这是我的意见。

现在要解决您的问题，您需要做一个技巧来评估对象的多级属性。您可以使用$scope.$eval来评估针对范围对象的任何动态表达式。例如，您可以通过prop1.prop2.prop3或item

评估范围属性$scope.$eval("prop1.prop2.prop3", item)上$scope.$eval("item." + "prop1.prop2.prop3")的动态属性评估

所以在你的指令中：

添加了范围函数以获取项目文本和值：

$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); 
}

和

 $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);

     ...

更新模板以获取相应的文字：

    <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

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

1 个答案: