0

I'm using angular-formly with multiple ui-select and when my data loads in the multiselect, the list I'm selecting from adds in items (duplicates) that were already preselected. Using select.refreshItems() didn't help either.

I don't understand the behaviour very much, but it seems to work properly (no duplicates created) if getBorrowers(parameters) loads faster than getBook(id).

My formly config:

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>'
        });

My formly form:

,{
    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;
        });  
    }

My controller:

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;
        }
    });

I'd appreciate any help.

Juggy
  • 27
  • 2
  • 6
  • Hmmm... This appears to be a data problem, not an angular-formly problem. Can you verify the data returns without duplicates? – kentcdodds Aug 28 '15 at 12:28
  • If getBorrowers() finishes loading before getBook() then it works as it should. If that is what you're asking. But they don't always load in this order. – Juggy Aug 28 '15 at 14:52
  • No, what I'm asking is that it seems to me like `getBook()` is returning the duplicate data. – kentcdodds Aug 28 '15 at 18:45
  • Well, getBook() has data about its current borrowers (users) which are loaded in the ng-model of the multiple ui-select as the "preselection". Once getBorrowers() loads in options, it's possible that some of the options will be same as the borrowers in the ng-model. When that happens, I don't want the preselected borrowers to be in the options since selecting them throws `Error: ngRepeat:dupes Duplicate Key in Repeater`. – Juggy Aug 29 '15 at 11:42
  • That's not something that angular-formly can do for you. You'll have to do that yourself when the response comes back. – kentcdodds Aug 30 '15 at 19:44
  • Any ideas on how to do that? – Juggy Aug 30 '15 at 21:18
  • So, just to be clear you're saying that `getBook` and `getBorrowers` can return duplicates of one another? Or that individually they have duplicates in themselves? – kentcdodds Aug 31 '15 at 15:40
  • `getBook` has data about its current borrowers so what I'm saying is that the model and the options can contain the same borrowers. And once you pick from options the borrower that was already selected, duplicate error appears. Anyway, I was able to solve it by adding `model[options.key]` into `function refreshBorrowers(query, field, model[options.key])` and replacing every borrower in getBorrowers with borrowers from the model who had the same id. – Juggy Aug 31 '15 at 19:05

0 Answers0