Question

我想知道是否可以使用Angular-Formly更改选择选项，具体取决于其他选择的选定值。

假设我有 beverageTypeSelect 和 drinkSelect 。

beverageTypeSelect 包含 Alcoholic 和 Non-Alcoholic 选项。

drinkSelect 会有喜力，百威，酒精96％，如果 beverageTypeSelect 价值是酒精。
drinkSelect 会有可口可乐，百事可乐，水，如果 beverageTypeSelect 价值是非酒精。

我该怎么做？

编辑：

好的，让我们试着让它更清晰一些：这不是我真正的应用程序，但我想保持简单，并为此获得一般解决方案，所以我将继续使用饮料。

我们正在使用https://github.com/formly-js/angular-formly-templates-bootstrap。

我们有一个形式的表单生成器。这里有趣的代码部分是：

if (obj.ngOptions){
    o.templateOptions.options=[];
    o.templateOptions.ngOptions = obj.ngOptions;
}

我们已经发现选项必须是一个空数组，因此可以进行ngOptions。

所以我们有一个像这样的形式：

[{
    key: 'beverageTypeSelect',
    type: 'select',
    templateOptions: {
        options: [{
            name: 'Alcoholic',
            value: 'A'
        }, 
        {
            name: 'Non-Alcoholic',
            value: 'N'
        }]
     }
}, {
    key: 'drinkSelect',
    type: 'select',
    templateOptions: {
        options: [],
        ngOptions: 'item as item.label for item in model.drinkSelect track by item.id'
 }]

然后我们将有一个html来显示我们的表单：

<formly-form fields="formFields" model="DrinkingCtrl.data" form="DrinkingCtrl.form">
</formly-form>

最后，我们的控制器：

'use strict'

angular.module('drunkApp')
  .controller('DrinkingCtrl', drinking);

function drinking($scope, $stateParams, $state, $reactive, AutoSaveReactiveFormScope) {
  var self = this;
  var vm = AutoSaveReactiveFormScope($scope, this, 'NAME_TO_SEARCH_FOR_DRINK_FORMLY_FORM', 'drinkPublishName', drinkMongoCollection, $stateParams.id); // This is a factory that gives us everything (or almost it) that we need in a controller with form autosave functionallity :).

  var drinkOptions = [{
    id: 'H',
    label: 'Heineken',
    types: ['A']
  }, {
    id: 'B',
    label: 'Budweiser',
    types: ['A']
  }, {
    id: 'A',
    label: 'Alcohol 96%',
    types: ['A']
  }, {
    id: 'C',
    label: 'Coca-Cola',
    types: ['N']
  }, {
    id: 'P',
    label: 'Pepsi',
    types: ['N']
  }, {
    id: 'W',
    label: 'Water',
    types: ['N']
  }];

  vm.autorun(function() {
    if (self.data) {
      self.data.drinkSelect = _.filter(drinkOptions, function(drk) {
        return _.contains(drk.types, self.data.beverageTypeSelect);
      });
    }
  });
}

这确实有效，但我期待更清洁，我可以直接在表单声明中做些事情。也许做我们可以用required或hideExpression做的事情（我们可以写'model.option1！=“BLA”'或函数）。

p.s：希望这次我让自己更清楚。

Angular-Formly动态更改选择选项

0 个答案: