动态加载正式输入选项答案

【问题标题】：dynamically load formly typeahead options动态加载正式输入选项
【发布时间】：2016-01-24 12:36:12
【问题描述】：

我正在使用 Angular Formly，并尝试构建一个带有 Select 字段的表单，该字段允许选择一个国家/地区的状态。第二个字段是一个预先输入字段，它允许输入属于该状态的有效区域名称。但是，我无法动态更改预先输入的选项数组。

我已经从 Formly 示例中获取了 Typeahead 类型定义，并且可以很好地使用静态选项数组：

formlyConfig.setType({
  name: 'typeahead',
  template: '<input type="text" ng-model="model[options.key]" ' +
        'uib-typeahead="item for item in to.options | filter:$viewValue | limitTo:8" ' +
        'class="form-control">',
  wrapper: ['bootstrapLabel', 'bootstrapHasError'],
});

这是我的表单定义：

$scope.selectZoneFormFields = [

  {
    key: 'stateid',
    type: 'select',
    templateOptions:{
      label: Constants.DIVPOL,
      valueProp: 'id',
      labelProp: 'nombre',
      options: StatesManager.get()
    }
  },
  {
    key: 'zoneName',
    type: 'typeahead',
    templateOptions: {
      label: 'Zona',
      options: $scope.zoneNames
    }
  }
];

然后，我观察 stateid 的变化并刷新 $scope.zoneNames：

$scope.$watch('geo.stateid', function(newValue, oldValue) {
  if (newValue === undefined || newValue.length !== 2 || newValue === oldValue )
    return;
  console.log(' !!! STATE change detected: ' + oldValue + '-->' + newValue);
  refreshZones(newValue);
});

问题在于 typeahead 字段的选项仍然是在开头加载的选项（初始值为$scope.zoneNames）

我尝试在正式字段定义中使用控制器，但没有成功。

想法？

【问题讨论】：

最简单的方法是使用 ExpressionProperties。请参阅下面的答案

标签： angularjs typeahead angular-formly

【解决方案1】：

  {
    key: 'zoneName',
    type: 'typeahead',
    templateOptions: {
      label: 'Zona',
      options: []
    },
    expressionProperties: {
       'templateOptions.options': function($viewValue, $modelValue, $scope){
           $scope.to.options = []; //set to an empty array
           if($scope.model.stateid) { //if the state has been selected
             $scope.to.options = //whatever code you use to get the zones
             return $scope.to.options; //return the options
           }               
        }
    }
  }

【讨论】：