1

我正在尝试根据另一个表单元素值生成下拉列表值。而且，值将从 REST API 生成。当我在上一个字段下拉列表生成函数中选择一个值时，会重复发送请求。

http://url/type/ {{ data.make }}

<html>
   <head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
        <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/ng-formio@2.23.9/dist/formio-complete.min.css'>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src='https://cdn.jsdelivr.net/npm/ng-formio@2.23.9/dist/formio-complete.min.js'></script>
  </head>
<body ng-app="testApp">
    <div ng-controller="testCtrl">
        <formio form="testForm"></formio>
    </div>
    <script type='text/javascript'>
        var app = angular.module("testApp", ['formio']);
            app.controller("testCtrl", function($rootScope){
        $rootScope.testForm = {
            components: [
                {
                  type: 'select',
                  label: 'Make',
                  key: 'make',
                  placeholder: 'Select your make',
                  dataSrc: 'values',
                  data: {
                            values: [
                                {
                                    value: 'chevrolet',
                                    label: 'Chevy'
                                },
                                {
                                    label: 'Ford',
                                    value: 'ford'
                                },
                                {
                                    label: 'Toyota',
                                    value: 'toyota'
                                },
                                {
                                    label: 'Honda',
                                    value: 'honda'
                                }
                            ]
                        }
                    },
                    {
                        type: 'select',
                        label: 'Model',
                        key: 'model',
                        placeholder: 'Select your model',
                        dataSrc: 'url',
                        data: {
                            url: 'https://vpic.nhtsa.dot.gov/api/vehicles/getmodelsformake/{{ data.make }}?format=json'
                        },
                        valueProperty: 'Model_Name',
                        template: '<span>{{ item.Model_Name }}</span>"',
                        refreshOn: 'make',
                        selectValues: 'Results'
                    }]
                };
            });
    </script>
  </body>
</html>
4

0 回答 0