Monday, April 27, 2015

Checkboxes are colored black in IE 10 with ng-repeat

I have encountered a quite strange issue in Internet Explorer 10. Generally a checkboxe’s background color is filled with black and then transitions back to white, to the normal styling in IE 10. But the issue came with the behavior of my application. I had to keep a list of checkboxes and sort them in checked status and in ascending order.
When I click on the first checkbox it works fine; first turn into black and then turns back to normal color. But if I click any link other than the first one, IE 10 doesn’t seems to fire the event that turns the checkbox background color back into the normal color. Somehow I implemented the sorting part with orderBy filter inside the ng-repeat directive and I captured the checkbox select event via $event. Maybe capturing the $event caused the issue.

I have found a similar issue reported in Microsoft Connect, which is marked as won’t fix. Ultimately I decided to create my own directive.

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

Custom directive I created:


IE10 version: IE10.0.9200.17229
Angularjs version: AngularJS v1.2.23
I’m still not certain about the cause of the issue and hope someone could shine some light on this J

No comments:

Post a Comment