标签: ng-grid
角度ng网格行高
有没有办法根据其内容应用ng-grid中行的高度.有一个选项rowHeight,它改变了所有行的高度.但我希望根据其内容动态行高.
以下是我制作的Plunker,在此我使用了cellTemplate来插入教育领域,但我想根据教育领域细节增加行高.
http://plnkr.co/edit/tQJNpB?p=preview
根据这个链接,这是不可能的:[1] https://github.com/angular-ui/ng-grid/issues/157
但如果有人找到解决方案.....
21
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
将Ajax数据导入Angular网格
使用Angular Grid,我在console.log中获取ajax get数据.但是空格.
控制台日志显示:
[13:56:11.411] now!!
[13:56:11.412] []
[13:56:11.412] now!!
[13:56:11.556] <there is data returned from console.log(getData); >
这是js文件.
// main.js
var app = angular.module('myApp', ['ngGrid']);
var getData = [];
function fetchData() {
var mydata = [];
$.ajax({
url:'/url/to/hell',
type:'GET',
success: function(data) {
for(i = 0, j = data.length; i < j; i++) {
mydata[i] = data[i];
}
getData = mydata;
console.log(getData);
}
});
}
fetchData();
app.controller('MyCtrl', function($scope) {
console.log('now!!')
console.log(getData)
console.log('now!!')
$scope.myData = getData
$scope.gridOptions = {
data: 'myData', …20
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
错误:[ngModel:nonassign]表达式不可分配
尝试根据同一行中的另一个值从gridcollection显示columnvalue.用户可以选择/更改包含带有值的网格的模态中的值.当模态关闭时,值将被传回.那时我想为'也称为'设置一个值:
HTML:
Also known as: <input type="text" `ng-model="displayValue(displayNameData[0].show,displayNameData[0].value)">`
我在范围上创建了一个函数,仅在'show'值为true时才选择值:
$scope.displayValue = function (show, val) {
if (show) {
return val;
}
else {
return '';
}
}
但是,当我关闭模态时,我收到一个错误:
Error: [ngModel:nonassign] Expression 'displayValue(displayNameData[0].show,displayNameData[0].value)' is non-assignable.
plnkr参考:http://plnkr.co/edit/UoQHYwAxwdvX0qx7JFVW？p = preview
20
推荐指数
推荐指数
3
解决办法
解决办法
4万
查看次数
查看次数
如何下载Angular UI Grid？
我不敢相信我要问这个问题,但是如何下载Angular UI Grid呢？
之后,我点击下载按钮(上图),我在这里:
怎么办？我没有看到下载按钮.我不知道该怎么做.有人请告诉我,我必须明白这一点.
20
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
在任何ng-grid中添加html链接
我想添加到ng-grid的链接.这是我的代码供您参考
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link href="../../Content/ng-grid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/angular.js" type="text/javascript"></script>
<script src="../../Scripts/ng-grid.js" type="text/javascript"></script>
<script src="../../Scripts/main.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "RK.PRABAKAR", age: 25, href: "<a href='#'>Link1</a>" },
{ name: "Yoga", age: 27, href: "<a href='#'>Link1</a>" },
{ name: "James", age: 27, href: "<a href='#'>Link1</a>" },
{ name: "Siva", age: 35, href: "<a href='#'>Link1</a>" …19
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
ng-grid自动/动态高度
如何让ng-grid根据页面大小自动调整其高度？ng-grid网站上的文档使用固定高度.我见过的最佳解决方案来自此链接:
.ngViewport.ng-scope {
height: auto !important;
overflow-y: hidden;
}
.ngTopPanel.ng-scope, .ngHeaderContainer {
width: auto !important;
}
这不适用于服务器端分页.我已经从ng-grid的站点复制了服务器端分页示例,并应用了上面的css,但正如您所看到的,只显示了前6行:http://plnkr.co/edit/d9t5JvebRjUxZoHNqD7K？p =预习
{height:100%}不起作用......
19
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数
ngGrid多列过滤
我正在使用AngularJS的ngGrid模块来显示一些分页数据.我希望能够搜索多个列,但是使用OR搜索.
假设我有一个包含以下标题的列:Id,Name,Description.当我搜索时,我想返回Id或名称或描述包含搜索词的所有行.
$scope.pagingOptions = {
pageSizes: [20, 50, 100],
pageSize: 20,
totalServerItems: 0,
currentPage: 1
};
$scope.gridOptions =
{
data: 'myData',
columnDefs: [
{ field: 'id', displayName: 'Id' },
{ field: 'name', displayName: 'Name' },
{ field: 'description', displayName: 'Description' },
{ displayName: 'Actions', cellTemplate: '<input type="button" data-ng-click="doSomething(row.entity)" value="Do Something" />'}],
enablePaging: true,
showFooter: true,
showFilter: true,
pagingOptions: $scope.pagingOptions,
filterOptions: {
filterText: "",
useExternalFilter: false
}
};
我尝试使用默认搜索框,并使用绑定到$ scope.filterText的外部输入框来定义自定义过滤器,例如:
$scope.filterUpdated = function () {
$scope.gridOptions.filterOptions.filterText = 'id:' + $scope.filterText + …18
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何隐藏ng网格中的列
这是我的代码:
的index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{empno: 111, name: "Moroni", id: 1},
{empno: 222, name: "Tiancum", id: 2},
{empno: 333, name: "Jacob", id: 3},
{empno: 444, name: "Nephi", id: …18
推荐指数
推荐指数
4
解决办法
解决办法
5万
查看次数
查看次数
当griddata与先前显示的griddata具有不同的列数时,如何刷新ng-grid
我有一个应用程序,用户选择一个选项从服务器端获取网格数据,并取决于用户选择的选项,网格数据中的列数可能会有所不同.我正在使用Angularjs和ng-grid来显示数据.第一次,它工作正常,它确实显示正确的列数(例如2列).但是当用户选择其他选项(获得3列网格数据)时,ng-grid仍会考虑旧列信息并尝试在旧2列中映射第二个3-cols网格数据.由于列信息不可用,我无法在控制器中使用columnDefs.如何刷新ng-grid列.
注意:我试图将代码放在jsFiddle(http://jsfiddle.net/User888/pwUeX/11/),但不知何故,我无法运行它.我的完整代码在这里.
另外:如何在不从服务器发送行的情况下在ng-grid中显示行#.
My HTML file:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>test </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.io/ng-grid/lib/ng-grid.js"></script>
<script type="text/javascript" src="gridExample.js"></script>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body ng-controller="GridExampleCtrl">
<div>
Grid Selection:
<select ng-model="gridSelectedId">
<option ng-repeat="gridSel in gridSels" value="{{gridSel.GridSelId}}">{{gridSel.GridSelName}}</option>
</select>
<br/>User selected: {{gridSelectedId}} <br><hr>
<div>
<button ng-click="display()">Display</button><hr>
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
</html>
我的控制器是:
var app = angular.module('myApp', ['ngGrid']);
app.controller('GridExampleCtrl', function ($scope, $http, $timeout) { …16
推荐指数
推荐指数
2
解决办法
解决办法
4万
查看次数
查看次数
如何获取元素的outerHTML,innerHTML和getText()
我是量角器框架的新手,我已经尝试了一段时间来弄清楚如何获取outerHTML/InnerHTML/getText()(子元素),以便我可以测试元素<img>是否呈现在视图上.抬头,我们已经ng-grid和我正在尝试查看它的第一列,看它是否包含一个img元素,也检查它是否包含一个属性即src=res/someImg.png.
这就是我得到的
HTML
<div>
<a>
<div>
<div>
<span>
<i><img src="res/someImg.png"></i>
</span>
</div>
<div>
...
</div>
<div>
...
</div>
</div>
</a>
</div>
测试
it('should render an icon in agent list', function () {
var row = element.all(by.repeater('row in renderedRows')).get(3);
expect(row).not.toEqual(null); //pass
expect(row.element(by.css('img')).getAttribute('src').getText()).toMatch(/someImg.png/);//fail with null
expect(row.element(by.css('span')).outerHTML).toBe('<i><img src="res/someImg.png"></i>'); //fails
expect(row.element(by.css('i')).innerHTML).toBe('<img src="res/someImg.png">'); //fails
});
有人能说出我做错了吗？
15
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
标签 统计
ng-grid ×10
angularjs ×9
javascript ×4
angular-ui ×2
css ×1
github ×1
protractor ×1
testing ×1