Связывание nggrid с . в json-объекте

У меня возникла проблема, когда я пытаюсь связать ng-grid с массивом json, возвращаемым с сервера, который содержит файлы . в именах столбцов. Чтобы продемонстрировать проблему, я создал здесь плункер:

http://plnkr.co/edit/eXuPy4dNHyJqeZ5bV2lB?p=preview

Если вы заметили в плункере, если я использую xyz.name, я не могу привязать данные к ng-grid. Однако, если я заменю его на xyz_name, он будет работать отлично. Я понимаю, что ng-grid использует . обозначение для перехода на следующий уровень массива json для получения полей. Я надеюсь получить обходной путь, который будет работать с имеющимися у меня данными.

Любые предложения/обходные пути для достижения этого?

спасибо, Кунал


person Kunal    schedule 10.04.2014    source источник


Ответы (1)


Решение состоит в том, чтобы определить cellTemplate для этого столбца, используя метод row.entity[col.field] вместо метода row.getProperty(col.field) по умолчанию.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.myData = [{
    "xyz.name": "Moroni",
    age: 50
  }, {
    "xyz.name": "Enos",
    age: 34
  }];



  var colDefs = [{
      field: 'xyz.name',
      cellTemplate: '<div>{{row.entity[col.field]}}</div>'
    }, {
      field: 'age'
    }

  ];

  $scope.gridOptions = {
    data: 'myData',
    columnDefs: colDefs
  };
});

Итак, что не так с CellTemplate по умолчанию?

стандартная ячейкаTemplate, используемая в ng-grid, выглядит следующим образом:

<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)}}</span></div>

он использует метод row.getProperty(), который в конечном итоге вызывает угловой сервис $parse. он будет оценивать аргумент, который рассматривает . как дочерний оператор.

поэтому в этом случае «xyz.name» фактически отображается в структуру данных json следующим образом:

xyz:{name: "moroni"}

row.entity[col.field] просто отображает данные как хэш-карту, так что здесь она будет служить цели.

person khanmizan    schedule 10.04.2014
comment
Спасибо за подробное объяснение. Это решило проблему, описанную в файле plunker. Надеюсь, я смогу решить эту проблему в своем коде, который использует динамическую привязку с динамическими colDefs и данными JSON. Буду держать вас в курсе. - person Kunal; 11.04.2014