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

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> 

已经绑定到点击事件的控制器方法：

 $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

问题截图：

有人可以帮我吗？

Answer 1

我能够通过一个小变通方法解决这个问题。我创建了一个 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 个复选框时，需要一些时间来检查新的复选框。不知何故，这解决了复选框着色的问题。

Answer 2

我会从使用ng-change 开始，而不是这里有一个做某事similar 的plunker。不幸的是，我目前正在使用的计算机上有 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有关