javascript - 选择在 chrome 上工作，但不在 firefox/IE 上工作

Question

我使用 angularjs 将数据库中的选项加载到选定的选择中，代码在 Chrome 浏览器上按预期工作，但在 Firefox 或 Internet Explorer 上代码不会加载选项。

我尝试从指令切换到 Angular 选择库，这个库适用于所有浏览器，但 ng-change 不会触发与事件关联的函数。

这是我的原始代码(仅适用于 chrome): 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>  

js文件:

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

我在选择上加载选项的部分:

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: index.orden});              
                    $scope.capas.push(index.nombre);
                }else{
                    $scope.addTipolog.push({id: index.id, nombre: index.nombre, valor: index.valor, orden: index.orden});
                }           
            });         
            console.log("Carga de capas completa");     


        }else{
            console.log("Error al cargar catalogos\n");
        }
    });

当我使用所选的 Angular 时，我将模块代码更改为: var App = angular.module('App', ['localytics.directives']); 并删除我选择的指令。

任何关于为什么只适用于 Chrome 的提示吗？或者为什么选择的 Angular 不会触发 ng-change 事件？

编辑:添加了您可以测试的服务器站点 http://192.168.15.100:8008/ewisemaps/capas

Answer 1

根据angular-chosen docs :

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

这意味着对 select 标记使用 ng-repeat 可能会导致意外行为 - 例如，跨不同浏览器。

尝试去掉你的选项标签并只使用 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>  

仅供引用:您到服务器站点的链接在 StackOverflow 上不起作用。仅当您与尝试连接的计算机位于同一区域网络时，才能直接连接到 IP 地址。