Angularjs ng-repeat: check boxes are colored black in IE10

Question

I have noticed that in IE10, a checkbox's background colour is filled with black then transitions back to white. When I sort using ng-repeat, IE10 does not seem to fire the event that turns the checkbox background colour back into white/normal colour.

Here is the HTML that does the ng-repeat for checkboxes, and filter's them according to status and name:

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

Controller method that has been bind to the click event:

 $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 version: IE10.0.9200.17229

Angularjs version: AngularJS v1.2.23

Screenshot of the issue:

enter image description here

Can someone help me?

What does this have to do with the color of those checkboxes? Looks to me that's CSS, not JavaScript. — Sergiu Paraschiv, Mar 11 '15 at 15:14
Not true the browser overrides most checkbox styling so this is infact a javascript issue. I am still a little confused as to how one is white and the rest are black. What gets you in/out of each state. Do you see anything in the console log? I have seen things like this when you have to return true in the eventlistener but I don't think angular would tread on that. All of that aside it might be good to upgrade your angular too. — Jackie, Mar 11 '15 at 15:21
What? That makes no sense whatsoever. Whatever is happening it's coming from some code/markup that OP is _not_ showing us. Either there's some other JS code changing something _or_ there's some CSS doing that. I repeat - there is nothing changing `style`, `class` or maybe the `disabled` attribute on those checkboxes. — Sergiu Paraschiv, Mar 11 '15 at 15:50
Also there's a bug report on something similar: https://connect.microsoft.com/IE/feedback/details/835620/ie10-the-background-of-checkbox-becomes-black (Closed as Won't Fix) — Sergiu Paraschiv, Mar 11 '15 at 15:54
@SergiuParaschiv the color of the label in front of the checkbox should change once the checkbox is checked. I have noticed that all checkboxes in IE10 becomes black in click event and then turn back to normal color. Seems the bug report relates to this. — helloworld, Mar 11 '15 at 16:17
@Jackie the white checkbox in top is always in top and when I select it first, there's nothing to change in sort order I guess. so it come back to white color background as expected. — helloworld, Mar 11 '15 at 16:20
So are you saying the first one you select is always white and the rest black? Like what if you select the second or third one first? Is it white and the others black? Again I go back to my comment about avoiding $events because jQuery can hijack events on occasion. Will you try the plunker and see if it works — Jackie, Mar 11 '15 at 17:49
Does `itemsFactory.doSomething` return a different array or the same one? — Sergiu Paraschiv, Mar 11 '15 at 18:15
it returns the same array, but it updates the color binds to the label, that color property in in another context. — helloworld, Mar 12 '15 at 04:02
Thanks for being alert with this all. I think the issue relates with the IE10 bug that has been reported. So I decided to create my own directive which mimics the checkbox functionality. — helloworld, Mar 12 '15 at 17:12

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

I would start off by using ng-change instead here is a plunker that does something similar. Unfortunately I have IE 8 on the computer I am currently using and can't confirm :-(.

I would really avoid using ng-checkbox I think this is the one I used to base mine.

Here is what I came up with

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

Basically my guess is it is related to $event

edited May 23 '17 at 12:28

Community

1
1

answered Mar 11 '15 at 15:45

Jackie

21,969
32
147
289

Again, what do `ng-click` and `ng-change` have to do with the styling of something? Yes, you can write some code that adds a class or changes some style inside the `click/change` callback, but neither OP's code or your code do anything like that. – Sergiu Paraschiv Mar 11 '15 at 15:52
Look at my plkr I added a background-color to show that doesn't work on inputs. This has to do with the jquery event – Jackie Mar 11 '15 at 17:52
Hello @Jackie, thanks for ur reply. I created a custom directive to fulfill my requirement. – helloworld Mar 12 '15 at 17:14

score 0 · Answer 2 · answered Mar 17 '15 at 12:35

I was able to solve this issue with a small workaround. I created an AngularJS directive which updates css and performs the intended task.

Directive:

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

            }
        }
    }]);

but with this solution I have encountered a performance issue. When a user selects more than 5 checkboxes, it took some time to check new checkboxes. Somehow this solved the issue with checkboxes getting colored.

Angularjs ng-repeat: check boxes are colored black in IE10

2 Answers2