Question

我有一个日期为标题的列，请参阅我的json，如下所示：

[{
  "Index": 1,
  "FirstName": "Jon",
  "LastName": "mind",
  "Job": "ME - preplaning",
  "3/8/2017": false,
  "3/7/2017": true
}, {
  "Index": 2,
  "FirstName": "KARIM",
  "LastName": "AL",
  "Job": "Mfg shift leader",
  "3/8/2017": false,
  "3/7/2017": false
}]

我需要在我的uigrid中设置日期列的复选框，以检查值是真还是假，所以这就是我所做的

 name: key, 
 displayName: key,
 type: 'boolean',
 cellTemplate: '<input type="checkbox" ng-model="row.entity.key">'

变量键包含列名，因此我的情况下的键将获得3/7/2017，但它会引发错误，因为我猜row.entity.3/7/2017是不可能的，任何解决方案的人？

Answer 1

这应该为你做...

var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', function($scope) {
  $scope.gridOptions = {
    columnDefs: [{
        name: 'Index'
      }, {
        name: 'FirstName'
      }, {
        name: 'LastName'
      }, {
        name: 'Job'
      },
      {
        name: '3/8/2017',
        cellTemplate: '<input type="checkbox" ng-model="row.entity[col.field]">'
      }, {
        name: '3/7/2017',
        cellTemplate: '<input type="checkbox" ng-model="row.entity[col.field]">'
      }
    ],
    data: [{
      "Index": 1,
      "FirstName": "Jon",
      "LastName": "mind",
      "Job": "ME - preplaning",
      "3/8/2017": false,
      "3/7/2017": true
    }, {
      "Index": 2,
      "FirstName": "KARIM",
      "LastName": "AL",
      "Job": "Mfg shift leader",
      "3/8/2017": false,
      "3/7/2017": false
    }]
  };
}]);

div[ui-grid] {
  height: 110px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <div ui-grid="gridOptions"></div>
  <div>{{gridOptions.data}}</div>
</div>

如果您有任何其他问题，请告诉我。

日期作为json中的列标题

1 个答案: