如果性能受到关注,Angular 2项目应使用哪些数据网格？
我一直在使用ng-tableAngular 1,但我不确定哪个在Angular 2的性能方面会很好.
我在td中按下按钮时遇到了麻烦.
这可能是一个简单的CSS问题,但该应用程序使用bootstrap,AngularJS,AngularJS-ui-bootstrap和ngTable.我已将所有这些组件都包含在我的plunkr中.
我试图用按钮在td上设置"horizontal-align:middle",但似乎没有得到应用.按钮仍然靠在单元格的左侧.
在我的小型AngularJS应用程序中,我使用ngTable库渲染了几个表.只有一个可以使用分页.其他人总是适合不到一页.每个渲染的ngTable似乎都在表格下面添加了"10 25 50 100"选择器.对于我的大多数桌子来说,这是浪费空间而且无法使用.如何删除该部分并恢复该空间？
我有一张ng-table.我在一个控制器内有多个ng-table.我给动态属性,即ng-table ="tableParams2"或ng-table ="tableParams3"等.我正在按钮点击功能上发出ajax请求来更新数据.我的http请求正在后端发送.在我点击3-4次后,我在控制台中看到我的表被重新加载.通过数据后,我的数据保持不变,我没有在表中看到重新加载的内容.以下是我的代码:
HTML:
<button ng-click="qualifyX(2)" ></button>
<div class="dragable modal hide fade ui-draggable in" id="ptn_popup" aria-hidden="false" data-backdrop="false">
<div class="modal-header">
<a class="close" data-dismiss="modal" data-original-title="" title="">×</a>
<h4>Possible matched Companies</h4>
</div>
<div class="modal-body" style="padding: 10px;">
<div id="ptn_qualify_res" class="grid-view">
<div class="summary"></div>
<table ng-table="tableParams2" show-filter="true" class="items table table-striped table-bordered table-condensed">
<tr ng-repeat="business in $data">
<td data-title="'Primary Trading Name'" sortable="'primary_trading_name'" filter="{ 'primary_trading_name': 'text' }">
{{business.primary_trading_name}}
</td>
<td data-title="'Primary Entity Name'" sortable="'primary_entity_name'" filter="{ 'primary_entity_name': 'text' }">
{{business.primary_entity_name}}
</td>
<td data-title="'Business Name(s)'" sortable="'business_names'" filter="{ 'business_names': 'text' …我正在使用ng-table来显示一些信息.我想固定ng-table的页眉和页脚,并强制ng-table在行中绘制滚动条.
ng-table文档站点没有关于如何实现这一目标的文档.
有任何想法吗？
我正在尝试使用ng-table并尝试在很多地方添加它,但它给出了所有情况的错误.
当我ngTable在app.js中添加时,它给出了:
错误:[$ injector:unpr]未知提供者:ngTableParamsProvider < - ngTableParams
当我ngTable在控制器中添加时,它的undefined不是控制器的函数.
我该如何解决？
我正在尝试使用ngTable构建一个表,但使用不同于ngTable页面示例中描述的自定义过滤.
我想要过滤,但我不希望ngTable呈现过滤器选择器.我想自己渲染它们(在表格上方),然后在我的"getData()"方法中引用它们.
前面提到的例子没有解释任何一种机制是如何工作的.我不知道在每个"td"元素的"filter"属性中确切需要指定什么.我理解AngularJS $ filter函数的基本语法,但我不清楚ngTable在做什么.从一个例子看,我看起来只能进行"等于"检查,这只会选择相关列值等于过滤值的行.这不是我需要的.
我的表有几列.其中两个被称为"key"和"failed",分别是string和boolean.当我在表格上方渲染这些过滤字段时,我需要为"失败"过滤器设置自定义标签.过滤"key"列应该将过滤器值与"key"值的任何子字符串匹配.例如,如果我的键值为"abc","abac"和"def",则过滤值"a"将导致前两个条目显示,而不显示"def"条目.
更新:
与此相关,我希望我能弄清楚如何做这样的事情:
假设我的表元素中有一个ngRepeat表达式,使用"standard"angularjs过滤器:
"item in $data | customfilter:param | anothercustomfilter:param"
我们知道这不太有效,因为这些过滤器仅适用于从"getData()"方法获得的一个页面切片.我真正希望能够在我的"getData()"方法中做的只是访问整个过滤器链,包括参数表达式,并简单地将一个不同的数组传递给它,作为整个原始数据列表,而不仅仅是页面切片.
与此同时,我需要通过在正常处理中执行该过滤器链来"关闭"过滤angularjs自己做的事情.
这听起来很难,但我发现当前的API需要在html和javascript之间进行大量的耦合.如果html可以指定所需的过滤,那将是很好的,javascript将只使用整个过滤器链,但在整个数据列表上使用它,而不仅仅是页面切片.
更新:
以下是我的HTML的相关摘录:
<label for="keysFilter">Filter Keys:</label>
<input id="keysFilter" type="text" ng-model="keysFilter"/>
<label for="showOnlyFailed">Show only queries that failed?</label>
<input id="showOnlyFailed" type="checkbox" ng-model="showOnlyFailed"/>
<table ng-table="tableParams" table-pagination="custom/pages" class="table">
<tr ng-repeat="queryInfo in $data"> <!-- | filterFailed:showOnlyFailed | filterMatchingKeys:keysFilter -->
这是我的tableParams代码:
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: {
lastRun: 'desc'
}
},
{
debugMode: true,
total: $scope.completedQueries.length,
getData: function($defer, params) {
var orderedData …如何使用ajax/json填充包含"select"过滤器的ng表？
Plunk显示问题:http://plnkr.co/Zn09LV
我试图掌握AngualrJS和ng-table扩展,虽然我可以使用工作过滤器获得一些很好的表,当我使用javascript中定义的静态数据时 - 一旦我尝试将实际数据加载到桌子我遇到了障碍.
ng-table的主体正确填充,只要我只使用文本过滤器everthing似乎正在工作:
<td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
{{user.Name}}
</td>
工作得很好.
但是,如果我更新它以使用选择过滤器:
<td data-title="'Name'" filter="{ 'Name': 'select' }" sortable="'Name'" filter-data="Names($column)">
{{user.Name}}
</td>
我遇到了同步问题,因为在从服务器返回数据之前总是会评估Names变量.(可能在发送对服务器的请求之前评估Names varibale.)这意味着我得到了一个过滤器的空列表.
一旦数据从服务器返回 - 我似乎找不到更新选择过滤器的方法.重新运行创建过滤器列表的代码最初似乎没有效果 - 我不确定如何触发ng-table重新检查其过滤器,以便不读取更新的变量.在异步调用完成之前,我也无法找到推迟变量评估的方法.
对于我的javascript,我几乎使用了ng-table GitHub页面中的示例ajax代码,并在其上添加了select过滤器的示例代码.
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: 0, // length of data
getData: function($defer, params) {
// ajax request to api
Api.get(params.url(), …我在显示表时使用ngtable并在HTML中的这个地方
<tr ng-repeat="row in $data">
我不理解$ data的使用,因为在ng-repeat的其他情况下不需要'$'.
我正在尝试将我的代码重构为ES6.我正在使用角度流星和ng-table.在重构之前,数据显示在表格中.但是,在重构为ES6语法后,数据不再显示.这是重构代码的片段:
class MyController {
constructor($scope, $reactive, NgTableParams, MyService) {
'ngInject';
$reactive(this).attach($scope);
this.subscribe('myCollection');
this.myService = MyService;
this.helpers({
items() {
return this.myService.getItems();
},
itemTableParams() {
const data = this.getReactively('items');
return new NgTableParams({
page: 1,
count: 10
}, {
total: data.length,
getData: (params) => {
// not called
}
});
}
});
}
}
class MyService {
getItems() {
return MyCollection.find({}, {
sort: {
dateCreated: -1
}
});
}
}
export default angular.module('MyModule', [angularMeteor, ngTable, MyService])
.component('MyComponent', {
myTemplate,
controllerAs: 'ctrl',
controller: MyController …