Ui-grid angular expression does not render as expected in IE 11

Question

I'm trying to make this plunker Ui-grid cell template working on most browsers, but it fails in IE 11.

index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script data-require="ui-bootstrap@0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.js"></script>
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

Data.json

[
  {
    "jobId": "1",

    "loaded": 15000,
     "error":6000,
     "priced":5000
  },
    {
    "jobId": "2",

    "loaded": 15000,
     "error":6000,
     "priced":8000
  }


]

statusTemplate.html

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width:{{ (row.entity.priced/row.entity.loaded)*100|number:2}}% ;">

    {{ (row.entity.priced/row.entity.loaded)*100|number:2}}% 
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}% ;">
   {{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
  </div>
  <div class="progress-bar progress-bar-danger"  style="width:{{ (row.entity.error/row.entity.loaded) *100|number:2}}% ;">
    {{ (row.entity.error/row.entity.loaded) *100|number:2}}% 

  </div>
</div>

app.js

var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [

      { name: 'jobId' },
      { name: 'status', cellTemplate: 'statusTemplate.html' }
    ]
  };

  $http.get('data.json')
  .success(function (data) {
    $scope.gridOptions.data = data;
  });
}])

;

Any explanation is very appreciated

Update

This works on Firefox, Safari and Chrome

Brahim - were you ever able to find a solution for this?? I'm experiencing the same issue in IE 11 — Jeff, Dec 11 '15 at 00:16
the solution was given by 'Shak Smith' in his answer but the explanation was not so good for this reason I have not considered it as an answer — BRAHIM Kamel, Dec 11 '15 at 10:05

score 1 · Accepted Answer · edited May 23 '17 at 12:30

One of the problems that you may be getting is the Access denied. That happens when a script tried to access data from a source other than the host of the current page. Check this link: https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx. Check this link on how to disable Disable same origin policy Internet Explorer. Also, you should use ng-style instead of style only. Here's a plunkr http://plnkr.co/edit/X2SROdoYsUJ1MKwkbNUQ?p=preview

<div class="progress">
  <div class="progress-bar progress-bar-success" ng-style="{'width': (row.entity.priced/row.entity.loaded)*100 + '%' }">

    {{(row.entity.priced/row.entity.loaded)*100|number:2}}% 
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" ng-style="{'width': ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100 + '%' }">
   {{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
  </div>
  <div class="progress-bar progress-bar-danger"  ng-style="{'width':  ((row.entity.error/row.entity.loaded)*100) + '%' }">
    {{ (row.entity.error/row.entity.loaded) *100|number:2}}% 

  </div>
</div>

Ui-grid angular expression does not render as expected in IE 11

1 Answers1