选择在chrome上选择工作，但不是Firefox / IE

Chosen select work on chrome but not firefox/IE

本文关键字：选择 Firefox IE chrome 工作      更新时间：2023-09-26

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

我尝试从指令切换到角度选择的库，这个适用于所有浏览器，但 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
    };
});

部分 I 在选择上加载选项：

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

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

关于为什么只在Chrome上工作的任何提示？或者为什么选择的Angular不会触发ng-change事件？

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

根据角度选择的文档：

注意：不要尝试将ngModel与ngRepeat一起使用。这是行不通的。使用 ngOptions。这样更好。

这意味着对选择标记使用 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 地址。

相关文章：