我很想弄清楚为什么ng-grid不能在IE8中工作.我收到这个错误:Expected identifier, string or number ng-grid-2.0.5.debug.js, line 1535 character 17.
我正在直接从ng-grid主页复制一个例子(顺便说一下,所有示例都正确加载).有人有想法吗？
我会提出一个Plnkr或小提琴,但在IE8中都不会加载,所以它有点挫败了目的.
使用Angular 1.0.4,jQuery 1.8.1,ng-grid 2.0.5
HTML
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-2.0.5.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
CSS
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px;
}
使用Javascript
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) { …我正在尝试创建一个简单的ngGrid示例.我的代码基于角度种子.
我的index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="lib/ng-grid/2.0.7/ng-grid.css">
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/users">users</a></li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<script src="lib/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="lib/angularjs/1.2.0-rc.3/angular-route.js"></script>
<script src="lib/jquery/2.0.3/jquery.js"></script>
<script src="lib/ng-grid/2.0.7/ng-grid.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
我的模板文件只有grid div:
<div class="gridStyle" ng-grid="gridOptions"></div>
我的app.js是:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'ngGrid',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers' …使用ng-grid我想通过在添加到列表底部时滚动到它来显示新添加的行.
请看看插件:http://plnkr.co/edit/4jgy9wwr2HRhfhgKMKcX？p = preview
var grid = $scope.gridOptions.ngGrid;
grid.$viewport.scrollTop((($scope.myData.length - 1)* grid.config.rowHeight));
我不明白为什么网格不会一直向下滚动.我尝试添加rowHeight,但是每次网格都不会滚动到最后一行.
我知道通过将记录添加到列表顶部将解决问题我将对网格进行排序,并且其性质将空记录推送到底部.
如何在ng-grid中为新创建的行设置动画？
我想要的是,当新数据从服务器进入时,它会被添加到网格的开头,然后该行会发光几秒钟.
我已经尝试将ng-animate类添加到网格的rowTemplate中,但这是不成功的:
$scope.gridOptions = {
data: 'myData',
rowTemplate: '<div style="height: 100%" class="reveal-animation"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div><div ng-cell></div></div></div>'
};
我的揭示动画(直接从ng-animate文档中解除)是:
.reveal-animation.ng-enter {
-webkit-transition: 1s linear all;
transition: 1s linear all;
opacity: 0;
}
.reveal-animation.ng-enter.ng-enter-active {
opacity: 1;
}
但这似乎不适用于网格.
有没有办法实现这个目标？
这是我的尝试的一个Plunker http://plnkr.co/edit/iR9voQaFRREi0pjNLQgc?p=preview
我<ul>在底部添加了一个来显示我想要的行为(并证明ng-animate正在工作).
angularFire $ bind方法可以在这里找到:http://angularfire.com/flatdoc.html 和最新的ng-grid可以在这里找到:http://angular-ui.github.io/ng-grid/
我尝试了最简单的解决方案,但它没有用:
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
rowTemplate:'<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex(), \'color\': \'rgb(248, 248, 248)\',\'background\': \'none repeat scroll 0% 0% rgba(51, 51, 51, 0.7)\' }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',
headerRowTemplate: '<div ng-style="{ height: col.headerRowHeight,\'color\': \'rgb(248, 248, 248)\',\'background\': \'none repeat scroll 0% 0% rgba(51, 51, 51, 0.7)\' …$scope.myData = [{name: "Moroni", Date:
"01-1-2015",country:"india",address:"address"},
];
$scope.gridOptions = {
data: 'myData',
enableRowSelection:true,
};
<div flex>
<div class="gridStyle" ui.grid="gridOptions"> </div>
</div flex>
我有角度版本1.3.15,我已经安装了角度ui网格.运行我的应用程序后,它显示网格但无法选择行
有没有办法在ng-grid中显示行悬停按钮(类似http://jsfiddle.net/andrewboni/fnAwN/light/)？
我经常在范围问题上运行(我认为).
我有一个行模板:
rowTemplate: '<div ng-mouseover="grid.appScope.showButton()" ng-mouseout="grid.appScope.hideButton()">
<div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell>
</div>
</div>',
和一个带有按钮的单元格模板:
cellTemplate: '<div class="ui-grid-cell-contents button-cell">
<button ng-click="grid.appScope.removeRow(row)" class="btn btn-danger btn-xs pull-right" ng-show="grid.appScope.button">
delete
</button>
</div>'
但是,当我悬停一行时,按钮不仅会出现在悬停行中,而且会出现在每一行中.
完整代码:http://plnkr.co/edit/UV9R4GbaREmchXKpSjfx？p = preview
任何人都可以帮助我吗？
基于此帮助链接,我能够实现颜色更改,但在此解决方案中,它将颜色应用于整行,这不是我正在寻找的.
我想更改唯一编辑过的单元格的颜色.如果有人有任何想法,请分享.谢谢.
我一直试图在3小时内在ng-grid中显示json数据但是无法做到.我按照ng -grid的入门指南中给出的说明进行了跟踪.但是无法在网格中显示数据.
在我的UserEdit.aspx页面中,我的HTML代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserEdit.aspx.cs" Inherits="SampleWebApp.UserEdit" %>
<!DOCTYPE html>
<html >
<head runat="server">
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/ng-grid-2.0.14.min.js"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/Scripts/Control.js" type="text/javascript"></script>
<link rel="Stylesheet" type="text/css" href="/Styles/ng-grid.min.css" />
<link rel="Stylesheet" type="text/css" href="/Styles/Style.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server" novalidate>
<div ng-app="myApp">
<table style="width: 100%; height: 100%">
<tr style="text-align: center; vertical-align: middle;width:100%">
<td style="width:50%;text-align:left">
First Name:
<input type="text" name="firstname" ng-model="FirstName"/>
</td>
<td style="width:50%;text-align:left">
Last Name:
<input type="text" name="lastname" ng-model="LastName"/>
</td>
</tr>
</table>
</div>
<div ng-controller="MyCtrl">
<div …angularjs ×10
ng-grid ×10
javascript ×4
angular-ui ×1
angularfire ×1
animation ×1
firebase ×1
ng-animate ×1