Угловое выражение Ui-grid не отображается должным образом в IE 11

Question

Угловое выражение Ui-grid не отображается должным образом в IE 11

0

Я пытаюсь сделать этот шаблон ячейки Ui-сетки plunker работать в большинстве браузеров, но в 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="[email protected]" 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;
  });
}])

;

Любое объяснение очень ценится

Обновить

Это работает в Firefox, Safari и Chrome

BRAHIM Kamel 28 окт. 2015, в 18:03

Источник

0

Брахим, ты когда-нибудь мог найти решение для этого? Я испытываю ту же проблему в IE 11
Jeff 11 дек. 2015, в 00:16
0

решение было дано «Shak Smith» в его ответе, но объяснение не было таким хорошим, по этой причине я не рассматривал его как ответ
BRAHIM Kamel 11 дек. 2015, в 10:05

Теги:

angularjs

angular-ui-bootstrap

angular-ui-grid

1 ответ

Ещё вопросы

Брахим, ты когда-нибудь мог найти решение для этого? Я испытываю ту же проблему в IE 11
решение было дано «Shak Smith» в его ответе, но объяснение не было таким хорошим, по этой причине я не рассматривал его как ответ

Shak Smith · Answer 1 · 2015-10-28T16-43-00.000Z

Одной из проблем, которые вы можете получить, является отказ в доступе. Это происходит, когда скрипт пытается получить доступ к данным из источника, отличного от хоста текущей страницы. Проверьте эту ссылку: https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx. Проверьте эту ссылку о том, как отключить. Отключить такую же политику происхождения Internet Explorer. Кроме того, вы должны использовать только стиль ng, а не стиль. Здесь 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>