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.

回答2:

On a side note. What worked for me (i was getting this same error) was to call gridApi.core.refresh()

this is what caused IE to refresh the grid, even when two-way binded data was updated on a modal.

回答3:

I too experienced this problem with a beta version of Angular 1.3.

I fixed it by updating to the most recent version (1.3.10).