ng-grid doesn't update data

问题

Trying to create simple working app with ng-grid and ASP.NET MVC. Client side:

  var app = angular.module('TestApp', ['ngGrid'])
  app.controller('MainController', function ($scope, $http) {
  $scope.addresses = []

  $scope.filterOptions = {
    filterText: "",
    useExternalFilter: true
  };

  $scope.update = function () {
        $http.get('/Home/GetData', {
            params: { filter: $scope.filterOptions.filterText }
        })
        .then(function (result) {
            $scope.addresses = result.data
            //alert(JSON.stringify(result))
        })
        $scope.$apply()
 }

 $scope.update()

 $scope.gridOptions = {
    data: 'addresses',
    headerRowHeight: '50',
    columnDefs: [
    { field: 'country', headerCellTemplate: '<table><tr><td>Country</td></tr><tr><td ng-controller="MainController"><input type="text" placeholder="" ng-model="filterOptions.filterText"/></td></tr></table>' },
    { field: 'city'},
    { field: 'street'},
    { field: 'house'},
    { field: 'zipcode'},
    { field: 'datec'}
    ]
};

$scope.$watch('filterOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        $scope.update()
    }
}, true);

I can see that i get correct data from:

 public ActionResult GetData(string filter)
    {
        var query = from c in db.Addresses where c.country.Contains(filter) select c;

        return Json(query.ToList(), JsonRequestBehavior.AllowGet);
    }

In my code, the .then callback is called, and I can browse all the returned adin data.addresses. Yet, nothing is displayed in the grid. No error appears in the console.

回答1:

For anyone else experiencing this problem, the issue was documented by many more people here

The problem, I think (because I've never had the time to dig deep into the module to see what's going on), is that any cached object references will be reused with their template representation. I couldn't reproduce the problem by only changing a few objects, but this happened to me as well after I processed the input data from ui-grid through a pipeline of filtering/sorting it. In the end I would have an array with new objects and old objects (references), and also, the objects were mutated.

So in the end, when I was experiencing this problem, I used angular.copy

$scope.uiGridOptions.data = angular.copy(theNewResultedArray);

Use this more like a workaround and be careful as it has some performance implications, and you should limit this use case only when your data doesn't update successfully.