我正在尝试根据其他表单元素值生成下拉列表值。并且,将从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>