Question

我试图让这个plunker Ui-grid cell template在大多数浏览器上运行，但在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;
  });
}])

;

非常感谢任何解释

更新

适用于Firefox，Safari和Chrome

Answer 1

您可能遇到的一个问题是拒绝访问。当脚本尝试从当前页面的主机以外的源访问数据时，会发生这种情况。请检查此链接：https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx。请查看此链接，了解如何停用Disable same origin policy 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>

Ui网格角度表达式在IE 11中未按预期呈现

1 个答案: