- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
问题来了
我用 angularJS 列出了一些人。人是像这样的 JSON 对象:
{ "id":"0" , "name":"My name" , "firstname":"My first Name" , "contacts":[{"id":"0" , "type":"phone" , "value":"0574869345"},{"id":"1" , "type":"email" , "myEmail@mail.com"}] }
注意此人可能有多个联系信息(电子邮件、电话等...)
我实际上能够将人员列表(数组)显示到一个“简单”的表格中:
这听起来像是最合乎逻辑且最简单的解决方案。但在其他一些情况下,数据不太复杂,我正在使用“ng-grid”,现在是“ui-grid”来显示数据表。
而且,在那之前,我曾经使用 jquery.dataTables 但它似乎不适合 Angular ,因为它直接与 js var 相关,并且不会在 $scope 更改时“更新”......正如你可能知道了,用户将能够“更改”事件中的人员列表。因此网格/表格内容必须链接到范围。
这是我正在尝试实现的当前“仅 Angular ”解决方案的一个非常简短/简化的示例:http://jsfiddle.net/k2p3xxhx/
这是我希望尽可能使用的 ng-grid 解决方案(不工作!):http://jsfiddle.net/guprs47p/
最佳答案
Angular UI 网格允许您绑定(bind)自定义模板。您可以使用您的字段的单元格模板属性来实现您需要的功能。
您可以使用 cellTemplate,它只是您用于呈现数据的自定义 HTML。
<div ng-repeat='field in COL_FIELD'>
<div>{{field.id}} - {{field.type}}- {{field.value}}</div>
</div>
既然您有了模板,就可以使用它的 cellTemplate 属性分配给您的字段(它只不过是 UI Grid 中的一列),因此您的字段对象如下所示,
{
field: "contacts",
displayName: "Contacts",
cellTemplate: "<div class='ui-grid-cell-contents'><div ng-repeat='field in COL_FIELD'>{{field.id}} - {{field.type}}- {{field.value}}</div></div>"
}
可以看到,有一个COL_FIELD
会迭代数据,这个COL_FIELD
在绑定(bind)数据的时候会有实际的值。所以你知道实际值是一个数组,可以使用 ng-repeat
进行迭代。
因此,当 ui 网格呈现时,它将遍历您的数据并显示值。
下面我使用与您相同的示例来根据您的需要创建示例。
有关自定义模板的更多信息,您可以在 UI Grid 的 official site 上找到
希望对您有所帮助!
var app = angular.module("myApp", ['ui.grid']);
function ctrl($scope) {
$scope.myData = {
data: "listing",
columnDefs: [{
field: "id",
displayName: "ID"
}, {
field: "name",
displayName: "Name"
}, {
field: "firstname",
displayName: "First Name"
}, {
field: "contacts",
displayName: "Contacts",
cellTemplate: "<div class='ui-grid-cell-contents'><div ng-repeat='field in COL_FIELD'>{{field.id}} - {{field.type}}- {{field.value}}</div></div>"
}, ],
rowHeight: 100
}
$scope.listing = [{
"id": "0",
"name": "My name",
"firstname": "My first Name",
"contacts": [{
"id": "0",
"type": "phone",
"value": "0574869345"
}, {
"id": "1",
"type": "email",
"value": "myEmail@mail.com"
}]
}, {
"id": "1",
"name": "My name One",
"firstname": "My first Name One",
"contacts": [{
"id": "2",
"type": "phone",
"value": "0574444444"
}, {
"id": "3",
"type": "email",
"value": "myEmailOne@mail.com"
}]
}];
$scope.count = 0;
$scope.switch = function() {
if ($scope.count % 2 == 0) {
$scope.listing = [{
"id": "0",
"name": "My name",
"firstname": "My first Name",
"contacts": [{
"id": "0",
"type": "phone",
"value": "0574869345"
}, {
"id": "1",
"type": "email",
"value": "myEmail@mail.com"
}]
}, {
"id": "1",
"name": "My name One",
"firstname": "My first Name One",
"contacts": [{
"id": "2",
"type": "phone",
"value": "0574444444"
}, {
"id": "3",
"type": "email",
"value": "myEmailOne@mail.com"
}]
}];
} else {
$scope.listing = [{
"id": "2",
"name": "My name Two",
"firstname": "My first Name Two",
"contacts": [{
"id": "4",
"type": "phone",
"value": "0888888888"
}, {
"id": "5",
"type": "email",
"value": "myEmailTwo@mail.com"
}]
}, {
"id": "3",
"name": "My name Three",
"firstname": "My first Name Three",
"contacts": [{
"id": "6",
"type": "phone",
"value": "022222222"
}, {
"id": "7",
"type": "email",
"value": "myEmailThree@mail.com"
}]
}];
}
$scope.count++;
console.log('switched!');
};
}
.uiGridTable: {
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet" />
<div ng-app="myApp" ng-controller="ctrl">
<button type="button" ng-click="switch();">Switch</button>
<div ui-grid="myData" class="uiGridTable"></div>
</div>
关于javascript - AngularJS Ui-grid DataTables,如何避免多次重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33755264/
该插件的绝大多数文档表明您可以使用 对其进行初始化 $('#example').dataTable(); 但是http://www.datatables.net/examples/api/multi_
我有一个 SQL 查询,它获取一些数据(dbtable 表中的语言列)。查询使用 GROUP_CONCAT,因此一个单元格有多个结果,例如 "Ajax, jQuery, HTML, CSS". 我想要
我有一个由 jQuery DataTables 增强的动态表,它显示一个与此类似的自定义对象 example . JSON: { "data": [ { "name": "Ti
我有两个数据表。首先是 DataTable NameAddressPhones = new DataTable(); 具有三列姓名、地址和电话号码。但我只想要两列姓名和地址数据,所以我想将这些列(包含
有没有办法将“处理...”语言放在 DataTable 对象的顶部而不是垂直中间?如果我有一张长 table ,它会隐藏在页面之外,因为它的默认位置在中间。 $('#example').dataTab
当我们向 DataTables 添加自定义过滤器时: $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { ..
我可以更改 dataTables 中搜索文本字段的宽度吗? 我现在正在编写以下代码,但它不起作用。 $('#example').dataTable() .columnFilter(
使用 DataTables plugin 时 如何使分页和 Showing 1 to 8 of 8 entries 出现在顶部而不是底部? 谢谢 最佳答案 每个数据表控件都以唯一的 id 命名计划之后
Angular 版本:6.0.4 ~ 节点版本:10.4.1 ~ NPM 版本:6.1.0 我看到这个问题被问了很多次,但没有回答。 关注这些后instructions to install angu
当单击外部按钮时,我正在尝试使用 DataTable(新版本)修改单元格值。我现在有以下内容: $(document).on('click', '.dropdown-menu li a', funct
引用:http://datatables.net/reference/api/page.info() 我正在尝试获取 ajax POST 生成的 jQuery DataTable 的当前分页信息。 使
以下对我有用: $('#datatable').on('page.dt', function() { alert("changed"); }); 每当我更改页面时,都会显示警报。但是如果我想警
我有一个 HTML 表,我在其中应用了 DataTables 函数。我使用表的第一行并将"template"类应用为我的模板行。然后选择此格式并使用 JSON feed 填充表中的所有行。问题是 Da
我有一个由 DataTables 1.10 驱动的表。过滤已打开。当我在下面谈论“做搜索”时,我指的是使用该表的过滤功能。 问题描述 关闭 stateSave 一切正常。但是,当 stateSave
看看这个例子,http://www.datatables.net/examples/api/multi_filter_select.html ,它使用 DataTable API 中的 columns
我正在使用 jQuery DataTables 在 spring 4.x 应用程序中创建一个报表页面来呈现报表。 通过 Jackson 消息转换器解析后,服务器返回以下对象。 { "data"
我在刷新 Primesfaces 的延迟加载数据表时遇到了一些问题。我正在使用 3.0.M4。 使用过滤器在您的示例中使用三个类。还尝试了仅使用延迟加载的示例,但随后未在 Controller 中重新
在 Blue Prism (BP) 中,有一种叫做 Collection 的东西,它基本上是 C# 中的 DataTable。在 BP 中,您可以在集合中拥有集合。我的问题是,您可以在 C# 的 Da
我正在使用 Flutter DataTables 来显示购物车中的商品列表。现在我想编辑任何选定行的数量。有没有办法获取用户点击的行信息? 以下是我的DataTable的完整代码: class _Da
我有一个关于 primefaces 数据表组件的问题。我想将 DataTable 变量绑定(bind)到 p:dataTable,以便我能够从支持 bean 以编程方式操作第一个、行、rowsPerP
我是一名优秀的程序员,十分优秀!