B.J. A.A. February 2016

Chosen select work on chrome but not firefox/IE

I load options from a database into a chosen select with angularjs, the code works as expected on chrome browsers but on firefox or internet explorer the code doesn't load the options.

I tried to switch from a directive to the angular chosen library, this one works on all browser but the ng-change doesn't triggers the function associated to the event.

This is my original code(work on chrome only): HTML

       <select ng-model="addCapas" ng-change="aplicarFiltro()" 
            multiple class="control-group html-multi-chosen-select" 
            multiple="multiple" chosen style="width: 100%;">

      <option ng-repeat="filt in filtros"  value={{filt.nombre}}>{{filt.nombre}}</option>                       

    </select>  

the js file:

App.directive('chosen', function($timeout) {
    var linker = function(scope, element, attr) {

        scope.$watch('', function() {
            $timeout(function() {
                element.trigger('chosen:updated');
            }, 0, false);
        }, true);
        $timeout(function() {
            element.chosen();
        }, 0, false);
    };
    return {
        restrict: 'A',
        link: linker
    };
});

the part i load the options on the select:

App.controller("appCtrl", function ($http,$scope) {


    $http({url: "/ewisemaps/catalogoComp",
        data: $.param({
            catalogo: "Capas",
        }),
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
    }).success(function (res) {

        if(res!=null){              
            $scope.filtros = [];
            $scope.capas = [];
            $scope.addTipolog = [];
            angular.forEach(res.oapi, function (index, value) {
                if(index.tipo == 1){
                    $scope.filtros.push({id: index.id, nombre: index.nombre, valor: index.valor, orden: in        

Answers


Zachary Elias February 2016

According to the angular-chosen docs:

Note: don't try to use ngModel with ngRepeat. It won't work. Use ngOptions. It's better that way.

This implies that using ng-repeat for your select tag is likely to cause unexpected behavior -- for example, across different browsers.

Try getting rid of your option tag and just use ng-options:

   <select ng-model="addCapas" 
           ng-options="filtro for filtro in filtros"
           ng-change="aplicarFiltro()" 
           multiple class="control-group html-multi-chosen-select" 
           multiple="multiple" chosen style="width: 100%;"                      
   </select>  

FYI: your link to the server site won't work on StackOverflow. You can only connect directly to an IP address if you're on the same area network as the computer trying to connect.

Post Status

Asked in February 2016
Viewed 2,079 times
Voted 9
Answered 1 times

Search




Leave an answer