我试图使这个plunker Ui网格单元模板在大多数浏览器上都能工作,但在IE11中失败了。
指数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>
数据json
[
{
"jobId": "1",
"loaded": 15000,
"error":6000,
"priced":5000
},
{
"jobId": "2",
"loaded": 15000,
"error":6000,
"priced":8000
}
]
状态emplate.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;
});
}])
;
任何解释都非常感谢
使现代化
这适用于火狐,Safari和Chrome
您可能遇到的问题之一是访问被拒绝。当脚本试图从当前页面的主机以外的源访问数据时,就会发生这种情况。检查此链接:https://msdn.microsoft.com/library/dn887953(v=vs.94)。aspx。检查此链接,了解如何禁用相同来源策略Internet Explorer。此外,您应该使用ng样式,而不是仅使用样式。这是一个砰的一声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>
我使用的是角反应形式。在表单组的窗体控件中,我使用无法正常工作的正则表达式设置了验证器.模式,我不明白为什么。我已经验证了这个网站上的正则表达式 https://www.regextester.com/99144,以检查它,它工作正常 正则表达式(最少八个字符,至少一个大写字母,一个小写字母,一个数字和一个特殊字符) 这是表单组 因此,当我键入“World@20”时,它验证为真,但当我开始键入“W
我有元素,这些元素有一个绑定到复选框的语句。如果我物理地选中该复选框,将按预期响应。但是,如果我通过JavaScript选中或取消选中复选框,则复选框会按预期被选中或取消选中,但没有响应。这是正常工作吗?有没有更好的办法做到这一点? 下面是我的代码示例:“[]”=“<>” HTML-第1部分 [li id=“HomeButton”ng-if=“HomeChecked!=true”onclick=“
问题内容: 我在Angular UI Grid中有一个项目列表。当我单击一行时,我想转到另一个页面。(换句话说,网格中的每一行都是一个链接。) 我想这肯定是一个非常普遍的愿望,尽管我还没有真正看到过有关如何实现的文档。什么是完成此任务的好方法? 问题答案: 我自己想出了答案。这是我的控制器(ES6): 这是我的行模板(Jade): 另外,这是我的样式表(SCSS)。我认为突出显示光标下的行并使用光
问题内容: 我已经努力了两天才能使它正常工作,但我做不到(对正则表达式:S太糟糕了)。 从本文中,我需要检索两个不同的东西:和。为此,我创建了此正则表达式: 在该示例中,它可以工作。但是,如果我尝试其他文本:,则只会得到一个包含2个分组的匹配:和,而不是获得2个不同的匹配:一个具有分组和,另一个具有分组和。 我希望你能帮助我。 提前致谢。 问题答案: 这是为什么组合可能是邪恶的经典示例。请改用否定
我有一个有3列的网格。问题是第3列比其他两列更宽。都不是 网格-模板-列:重复(自动拟合,最小(33.33%,1fr)); 也不 网格自动列:33%; 工作,因为IE11不支持自动拟合和网格自动列。 在IE11中有没有替代的方法来实现这一点呢?多谢了。
问题内容: 我将现有的angular应用程序升级到angular(v1.2.13),ui-router(v0.2.8)和ui- bootstrap(v0.10.0)的所有最新版本。 我有具有多个命名视图的嵌套视图。其中一个命名视图内部具有选项卡。我以前可以在每个标签中进行设置,但现在不再起作用。如果我不使用选项卡,则命名视图将正确呈现。 我创建了一个plunkr以显示我所看到的。 这是我的状态配置