AngularJS Ui- DataTables，如何避免多ng重复
问题是，
我用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-重复使用"persons“(peopleList中的人)
- ng-重复“联系人”(people.contacts中的联系人)
这听起来像是最符合逻辑的简单解决方案。但在其他一些情况下，由于数据不那么复杂，我正在使用“ng网格”，即现在的“ui网格”来显示数据表。
在此之前，我曾经使用过jquery.dataTables，但似乎它不适合使用角，因为它与js直接相关，并且没有对$scope更改进行“更新”.正如您可能得到的那样，用户将能够在事件中“更改”人员列表。因此，网格/表内容必须链接到范围。
下面是我正在尝试实现的当前“只有角”解决方案的一个非常简短/简化的例子：http://jsfiddle.net/k2p3xxhx/
这是ng网格解决方案(不工作！)如果可能的话，我想使用：http://jsfiddle.net/guprs47p/
回答 1
Stack Overflow用户
发布于 2015-11-17 13:55:21
角度UI网格允许您绑定自定义模板。您可以为您的字段使用单元格模板属性来实现所需的功能。
您可以使用cellTemplate，它只是用于呈现数据的自定义HTML。
<div ng-repeat='field in COL_FIELD'>
<div>{{field.id}} - {{field.type}}- {{field.value}}</div>
</div>既然您有了模板，就可以使用它的cellTemplate属性将字段分配给您的字段( UI网格中的一个列)，因此您的字段对象如下所示，
{
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将具有绑定数据时的实际值。因此，您知道实际值是一个可以使用ng-repeat迭代的数组。
因此，当ui网格呈现时，它将迭代您的数据并显示值。
下面，我使用了与您相同的例子，根据您的需要创建示例。
有关自定义模板的更多信息，您可以在UI Grid的官方网站上找到
希望能帮上忙！
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>
https://stackoverflow.com/questions/33755264
复制相似问题
腾讯云开发者
