javascript - ng-grid doesn't update data - Stack Overflow

admin管理员组

文章数量:1417555

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.

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.

• javascript
• asp-mvc
• angularjs
• ng-grid

Share Improve this question Follow asked Jul 16, 2014 at 21:32 batuuubatuuu 2311 silver badge33 bronze badges 5

• What does your html for the grid element look like? – c0bra Commented Jul 17, 2014 at 15:07
• @c0bra, standart input under header title – batuuu Commented Jul 17, 2014 at 15:55
• if you see the data in data.addresses should you be using $scope.addresses = result.data.addresses ? – c0bra Commented Jul 17, 2014 at 21:38
• sry, my miss print, i can see data in $scope.addresses using JSON.stringify($scope.addresses). $scope.addresses change every time when call $scope.$watch, but ng-grid doesn't show changed $scope.addresses. First time calling $scope.update() feed ng-grid, but next times not refresh it. – batuuu Commented Jul 17, 2014 at 22:02
• I'm posting to your github issue; easier to municate there. github./angular-ui/ng-grid/issues/1302 – c0bra Commented Jul 18, 2014 at 13:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

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.

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).

本文标签： javascriptnggrid doesn39t update dataStack Overflow