AngularJS Ui网格数据表，如何避免多ng重复

AngularJS Ui-grid DataTables, how to avoid multi ng-repeat

本文关键字：何避免 ng 重复 Ui 网格数据表 AngularJS 更新时间：2023-09-26

问题出在这里，

我用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在"人员"上重复（人员列表中的人员）
ng重复"contacts"（联系人中的联系人。contacts）

这听起来似乎是最合乎逻辑的&简单的解决方案。但在其他一些情况下，对于不太复杂的数据，我使用的是"ng网格"，它现在是显示数据表的"ui网格"。

在此之前，我曾使用jquery.dataTables，但它似乎不适合angular，因为它与js-var直接相关，并且不会在$scope更改时"更新"。。。正如您可能得到的，用户将能够"更改"事件中的人员列表。因此，网格/表内容必须链接到范围。

以下是我试图实现的当前"仅角度"解决方案的一个非常简短/简化的示例：http://jsfiddle.net/k2p3xxhx/

如果可能的话，我想使用以下ng网格解决方案（不工作！）：http://jsfiddle.net/guprs47p/

Angular 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网格呈现时，它将迭代您的数据并显示值。

下面我使用了与您相同的示例来根据您的需要创建示例。

更多关于自定义模板的信息，您可以在UIGrid的官方网站上找到

希望它能有所帮助！

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>