Question

我将数据库中的选项加载到带有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
    };
});

部分我在选择中加载选项：

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的任何提示？或者为什么选择的角度不会触发ng-change事件？

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

Answer 1

根据angular-chosen docs：

注意：不要尝试将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地址。

选择chrome上的选择工作，但不选择firefox / IE

1 个答案: