Question

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

我从Formly Examples中获取了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);
});

问题是，预先输入字段的选项仍然是在开头加载的选项（初始值为$scope.zoneNames）

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

想法？

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

动态加载formahead类型选项

1 个答案: