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
Issue
report in Microsoft Connect: https://connect.microsoft.com/IE/feedback/details/835620/ie10-the-background-of-checkbox-becomes-black
I’m still not certain about the cause of the issue and hope
someone could shine some light on this J
