Angular formly 角形嵌套选择
我试图用Formly实现一系列嵌套的SELECT。我的选项如下所示:Angular formly 角形嵌套选择,angular-formly,Angular Formly,我试图用Formly实现一系列嵌套的SELECT。我的选项如下所示: $scope.productsList = [{ name : 'product1', options : [ name : 'option1Product1', name : 'option2Product1' ] }, { name : 'product2', options : [ name : 'option1Product2', name
$scope.productsList = [{
name : 'product1',
options : [
name : 'option1Product1',
name : 'option2Product1'
]
},
{
name : 'product2',
options : [
name : 'option1Product2',
name : 'option2Product2'
]
}
]
我的第一个选择很简单:
{
type: 'select',
key: "product",
templateOptions: {
label: 'Product',
options: $scope.productsList,
"valueProp": "name",
"labelProp": "name"
}
}
但是,当用户更改所选产品时,“我的第二个选择”不会更新其选项:
{
type: 'select',
key: "option",
templateOptions: {
label: 'option',
options: $scope.productsList[$scope.model.product].options,
"valueProp": "name",
"labelProp": "name"
}
}
你知道如何做到这一点吗 您可以在控制器内使用一个或一个常规的$scope.$watch
你可以考虑把后者签进去。
应用于您的模型:
JSBin:
您可以在控制器内使用一个或一个常规的$scope.$watch
你可以考虑把后者签进去。
应用于您的模型:
JSBin:
vm.formFields = [
{
key: 'product',
type: 'select',
templateOptions: {
label: 'Product',
options: [],
valueProp: 'name',
labelProp: 'name'
},
controller: /* @ngInject */ function($scope, DataService) {
$scope.to.loading = DataService.allProducts().then(function(response){
// console.log(response);
$scope.to.options = response;
// note, the line above is shorthand for:
// $scope.options.templateOptions.options = data;
return response;
});
}
},
{
key: 'options',
type: 'select',
templateOptions: {
label: 'Options',
options: [],
valueProp: 'name',
labelProp: 'name',
},
controller: /* @ngInject */ function($scope, DataService) {
$scope.$watch('model.product', function (newValue, oldValue, theScope) {
if(newValue !== oldValue) {
// logic to reload this select's options asynchronusly based on product's value (newValue)
console.log('new value is different from old value');
if($scope.model[$scope.options.key] && oldValue) {
// reset this select
$scope.model[$scope.options.key] = '';
}
// Reload options
$scope.to.loading = DataService.allOptionsByProduct(newValue).then(function (res) {
$scope.to.options = res;
});
}
});
}
}
];