Question

我有一个有效的角度选择框：

<select class="form-control"
        ng-model="selectedFeatureTypeFeature"
        ng-options="FeatureTypeFeature.ProjectVersionFeatureID as
        FeatureTypeFeature.Description for FeatureTypeFeature in FeatureTypeFeatures"></select>

我正在尝试修改ng-options中的'as'部分，如下所示：

<select class="form-control"
        ng-model="selectedFeatureTypeFeature"
        ng-options="FeatureTypeFeature.ProjectVersionFeatureID as
        (FeatureTypeFeature.CustomDesciption != null? FeatureTypeFeature.CustomDescription : FeatureTypeFeature.Description) for FeatureTypeFeature in FeatureTypeFeatures"></select>

区别在于一些FeatureTypeFeatures有自定义描述，有些则没有。我希望在可用时显示自定义描述，而在不可用时显示正常描述。

问题是 - 它只显示常规描述是否有自定义描述。

Answer 1

这样的逻辑真的属于控制器，而不是视图。创建条件列表的简便方法是使用控制器中的angular.forEach函数。以下是docs.

在不了解数据结构和现有控制器的背景的情况下，我创建了一个通用解决方案，您可以在此处查看：Plunker。

基本上，如果$scope使用forEach迭代器有条件push description，则为描述（和id）创建新的customDescription变量是空的：

  $scope.descriptionList = [];

  angular.forEach($scope.FeatureType, function(value, key) {
    if (value.customDescription !== '')
      $scope.descriptionList.push({ id:value.id, description:value.customDescription});
    else
      $scope.descriptionList.push({ id:value.id, description:value.description});
  });

然后使用这个新的$scope变量填充您的<select>表单。

我希望这会有所帮助。

Answer 2

解决方案：在控制器中创建了一个函数，该函数返回了正确的描述。

HTML：

ng-options="FeatureTypeFeature.ProjectVersionFeatureID as (getFeatureTypeFeatureDescription(FeatureTypeFeature)) for FeatureTypeFeature in FeatureTypeFeatures"

控制器：

 $scope.getFeatureTypeFeatureDescription = function (featureTypeFeature) {
    return featureTypeFeature.CustomDescription || featureTypeFeature.Description;
}

角度选择框 - ng-options自定义描述

2 个答案: