我正在使用带有多个ui-select的角度形式,当我的数据加载到多选中时,我选择的列表会添加已经预选的项目(重复项)。使用select.refreshItems()也无济于事。
我不太了解这种行为,但是如果getBorrowers(参数)的加载速度比getBook(id)快,那么它似乎正常工作(没有重复创建)。
我的形式配置:
formlyConfig.setType({
name: 'multiple-borrowers',
template: '<ui-select multiple ng-model="model[options.key]" theme="bootstrap"> <ui-select-match placeholder="{{to.placeholder}}"> {{$item[to.labelProp || \'name\']}} </ui-select-match> <ui-select-choices repeat="option in to.options" refresh="to.refresh($select.search, options)" refresh-delay="{{to.refreshDelay}}"> <div ng-bind-html="option[to.labelProp || \'name\'] | highlight: $select.search"></div> </ui-select-choices> </ui-select>'
});
我的形式:
,{
key: 'borrowers',
type: 'multiple-borrowers',
templateOptions: {
label: 'Borrowers',
labelProp: 'title',
required: true,
options: [],
refresh: refreshBorrowers,
refreshDelay: 0
},
controller: function($scope, MyService) {
var parameters = {limit: 5};
MyService.getBorrowers(parameters, function(response){
$scope.to.options = response;
});
}
},...
function refreshBorrowers(query, field) {
var parameters= {
filter: JSON.stringify({search: query}),
limit: 5
};
MyService.getBorrowers(parameters, function(response){
field.templateOptions.options = response;
});
}
我的控制器:
bindBookData = function(id) {
MyService.getBook(id, function(response) {
$scope.model = response;
});
};
$scope.$on('$stateChangeSuccess', function (e, toState, toParams) {
if(toState.data && toState.data.action === 'books.detail') {
bindBookData(toParams.id);
var form = $controller('BookCtrl');
$scope.fields = form.formFields;
}
});
我很感激任何帮助。