Search code examples
angularjsdjangodjango-autocomplete-light

django-autocomplete-light and angular: how can angular get the value selected


Using django-automcomplete-light V3 and angular on a non admin page.
Using the widget autocomplete.ModelSelect2

Where is the selected value stored? Using firebug, it's not in a new hidden html element and if i attempt to watch the original (now hidden) select element, it's value never changes if I change the selected value in the autocomplete widget.

How can angular watch/read this value?

Update:
As @visegan below points out you can use jquery syntax to get the value but for some reason you can't watch it.

i.e. this watch never gets triggered:

$scope.$watch(function(){
    return $('#id_field').val();
    },
    function(newVal, oldVal){
        console.log('current %r', newVal);
        $scope.models.foo=parseInt(newVal);
});

Solution

  • Well I have just tried with my project and it was pretty straight forward:

    $('#id_field').val()
    

    To be honest, I am also not sure where exactly does the value come from.

    As for the change watcher: autocomplete light now uses select2 component, which is apparently a bit problematic with angular. There are two approaches that works: first one is to add more jquery:

    $('#id_field').change(function() {alert('changed')});
    

    This I have tested. The other approach is to do it somehow natively. Look at Select2 event handling with Angular js