Question

我注意到在IE10中，复选框的背景颜色用黑色填充，然后转换回白色。当我使用ng-repeat排序时，IE10似乎没有触发将复选框背景颜色变回白色/正常颜色的事件。

以下是对复选框执行ng-repeat的HTML，并根据状态和名称对其进行过滤：

<div ng-repeat="item in (items | orderBy:['!status','itemName'])">
       <input type="checkbox" ng-click="itemClickEvent($event, item.itemId)" ng-model="item.status"/>
</div>

已绑定到click事件的控制器方法：

 $scope.itemClickEvent = function ($event, itemId) {
                var checkbox = $event.target;
                var checkboxState = checkbox.checked;
                if (checkboxState) {
                    $scope.items = itemsFactory.doSomething(itemId);
                } else {
                    $scope.items = itemsFactory.doAnotherthing(itemId);
                }
        };

IE10版本：IE10.0.9200.17229

Angularjs版本：AngularJS v1.2.23

问题的屏幕截图：

enter image description here

有人可以帮助我吗？

Answer 1

我首先使用ng-change，而不是这里有一个similar的东西。不幸的是我在目前正在使用的计算机上安装了IE 8，无法确认:-(。

我真的会避免使用ng-checkbox我认为is the one我过去常常使用它。

这是我提出的

<div ng-repeat="box in checks">
  <input type="checkbox" ng-model="box.checked" ng-change="check(box)">{{box.name}}</input>
</div>

JS

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.checks = [ 
    {
      name: "Test 1",
      checked: false
    },
    {
      name: "Test 2",
      checked: true
    },
    {
      name: "Test 3",
      checked: false
    }
  ]
  $scope.check = function(box){
    if (box.checked) {
      alert(box.name + "was checked!");
      // $scope.items = itemsFactory.doSomething(itemId);
    } else {
      alert(box.name + "was unchecked!");
      // $scope.items = itemsFactory.doAnotherthing(itemId);
    }
  }
});

基本上我的猜测是它与$ event

有关

Answer 2

我能够通过一个小的解决方法来解决这个问题。我创建了一个AngularJS指令，它更新了css并执行了预期的任务。

指令：

Angular.directive('directives.checkbox', [])
    .directive('checkBox', [function () {
        return {
            restrict: 'E',
            require: 'ngModel',
            replace: true,
            template: '<span class="icon-xxs iconUnCheck"></span>',
            scope:{
                checkboxCallbackFunction: '=',
                linkId: '=',
                checkStatus: '='
            },
            link: function (scope, elem, attrs, ctrl) {

                var isCheckboxChecked = false;

                function toggleCheckBoxIcon() {
                    isCheckboxChecked = !isCheckboxChecked;
                    scope.checkStatus = isCheckboxChecked;
                    if (isCheckboxChecked) {
                        elem.removeClass('icon-xxs iconUnCheck');
                        elem.addClass('icon-xxs iconCheck');
                    } else {
                        elem.removeClass('icon-xxs iconCheck');
                        elem.addClass('icon-xxs iconUnCheck');
                    }
                }


                elem.bind('click', function () {
                    scope.$apply(function () {
                        toggleCheckBoxIcon();
                        scope.checkboxCallbackFunction(scope.linkId, isCheckboxChecked);
                    });
                });

            }
        }
    }]);

但是使用此解决方案我遇到了性能问题。当用户选择5个以上的复选框时，需要一些时间来检查新的复选框。不知何故，这解决了复选框变色的问题。

Angularjs ng-repeat：复选框在IE10中显示为黑色

2 个答案: