Angularjs: JSON response not rendering in IE11

Question

I am facing very weird issue in IE11. I am fetching some data using get method which is working fine in Chrome and Mozilla but in IE11 it is causing issue.

This is my HTML markup:

<select multiple class="form-control" size="9" ng-model="form.selectedSrcObj.srcID" ng-change="getEnt()">
  <option value="{{f.id}}" ng-click="getEnt(f)" ng-repeat="f in fields" ng-selected="f.dflt_ind">
     {{f.nm}}
  </option>
</select>

In IE11 it renders like this:

{{f.nm}}
{{f.nm}}
{{f.nm}}
{{f.nm}}
{{f.nm}}
{{f.nm}}
{{f.nm}}

Instead in Chrome and Mozilla (as expected):

File 1
File 2
File 3
File 4
File 5
File 6
File 7

The most weird thing is I couldn't see any error in IE11 console and when I inspect the DOM I can see the correct data as above. Also I can see the whole JSON response in response body in IE11.

Initially I thought it could be caching problem in IE11 (read through via Angularjs' $http.get only executed once in IE11) and I included following META in header:

<meta http-equiv="cache-control" content="no-cache" />

But that also doesn't work. Then I have tried to include following polyfills but doesn't work too:

<!--[if gte IE 8]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://github.com/remy/polyfills/blob/master/EventSource.js"></script>
<![endif]-->

Can you please let me know what could be the reason and how to resolve it. I am not well verse in AngularJS. Thanks in Advance.

Did you try using ng-options? https://docs.angularjs.org/api/ng/directive/ngOptions. Which Angular version are you using? — ohboy21, May 13 '15 at 10:06
Maybe this helps: https://github.com/angular/angular.js/issues/4137 — therebelcoder, May 13 '15 at 10:08

score 0 · Answer 1 · answered May 13 '15 at 10:18

0

try bindonce like below,

<select bindonce multiple class="form-control" size="9" ng- model="form.selectedSrcObj.srcID" ng-change="getEnt()">
<option value="{{f.id}}" ng-click="getEnt(f)" ng-repeat="f in fields" ng-   selected="f.dflt_ind"  bo-text="f.nm">
</option>
</select>

answered May 13 '15 at 10:18

Prajapati Vikas

294
1
10

I have tried bindonce but didn't work. It's really weird because couldn't see any error in the console. But in the response body I can see the whole JSON array. – tutorialfeed May 13 '15 at 10:27

score 0 · Answer 2 · answered Oct 08 '15 at 15:26

I realize this question was asked a couple of years ago, but I just ran into a very similar issue, and was able to resolve it.

IE11 was rendering values from a {{ value }} syntax in an ng-repeat in literal text, rather than Angular rendering it normally like you mentioned in your question. My object being iterated on was not JSON, but just a normal array of objects.

Inspecting the DOM at the {{ value }} text revealed that IE was forcing a newline in the middle of the text, so that it was rendering as

{{

value }}

There was a simple fix: Removing the {{ value }} and replacing it with an ng-bind="value" on the element. But I still don't understand the root cause of IE rendering it in that way to begin with. Hope this helps someone!

Angularjs: JSON response not rendering in IE11

2 Answers2