Currently in the process of developing an AngularJS application, I came across a strange issue that I have never encountered before. It may be a simple fix, but I am unsure of the exact terminology to search for the right solution, so I apologize in advance if this is a common problem.
This is a snippet of my HTML code:
<div class="parent">
<div ng-repeat="item in itemList" style="left: {{100 / itemList.length}}px">{{item}}</div>
</div>
The itemList contains arbitrary data. The problem lies in the fact that the code inside the brackets is not being executed at all in IE11. While other browsers display a result of 25% when there are 4 values in itemList, IE11 simply interprets it as '{{100/itemList.length}}px', which is invalid CSS.
I attempted to convert the code to use ngStyle instead, but it had no effect. Does anyone know why this specific issue occurs in IE11 and how to resolve it?
Once again, I am not entirely sure if I am using the correct terminology, so any guidance in that regard would be greatly appreciated.
UPDATE
I also tried using ngStyle as recommended in a similar question found in the comments. However, it still does not work, though there are no parse errors.
ng-style="{left: 'calc(' + (100 / itemList.length) + '% - 10px);'}"
One possible explanation could be that on the initial page load, itemList is empty. But I would expect it to update during the digest cycle. Even after inspecting the element, 'left' does not show any assigned value.