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

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

以下是对复选框重复ng的HTML，并根据状态和名称对其进行筛选：

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

IE10版本：IE10.0.9200.17229

Angularjs版本：Angularjs v1.2.23

问题截图：

---

有人能帮帮我吗？

我会先用它来代替，这里有一个能做点什么的plunker。不幸的是，我目前使用的计算机上有IE 8，无法确认：-

我真的会避免使用ng复选框，我想这是我以前的基础

这是我想到的

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

---

基本上，我的猜测是它与$event有关，我可以通过一个小的解决方法来解决这个问题。我创建了一个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个以上的复选框时，需要一些时间来选中新的复选框。不知何故，这解决了复选框变彩色的问题

你能提供一个JSFIDLE之类的例子吗？这和那些复选框的颜色有什么关系？在我看来，这是CSS，不是JavaScript。不是真的，浏览器会覆盖大多数复选框样式，因此这实际上是一个JavaScript问题。我仍然有点困惑，一个是白色的，其余的是黑色的。是什么让你进出每个州。你在控制台日志中看到什么了吗？我在eventlistener中看到过这样的情况，当你必须返回true时，但我不认为angular会这么做。把这些都放在一边，也许升级你的角度也不错。什么？这毫无意义。无论发生什么，它都来自OP没有向我们展示的一些代码/标记。要么是其他JS代码在改变什么，要么是CSS在改变什么。我重复一遍-这些复选框上没有任何更改样式、类或禁用属性的内容。还有一个类似的错误报告：Closed as will not fixer，ng click和ng change与某些内容的样式有什么关系？是的，您可以编写一些代码，在单击/更改回调中添加类或更改某些样式，但OP的代码或您的代码都不会这样做。看看我的plkr，我添加了一个背景色来显示它对输入不起作用。这与jquery事件有关Hello@Jackie，谢谢你的回复。我创建了一个自定义指令来满足我的要求。

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

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

            }
        }
    }]);