ng网格单元格模板不更新更改的值

I am trying to refresh the ng grid data on button click which is out side the ng grid, the normal cell values are refreshing (the modified values are updated) but the cell templates are not refreshing based on the value changes.

我正在尝试刷新ng网格外的按钮单击时的ng网格数据，正常的单元格值正在刷新（修改后的值会更新），但单元格模板不会根据值更改进行刷新。

Thanks in advance

提前致谢

1 个解决方案

#1

As there is no example associated with the question, I will go ahead and create my own solution to update the cell template (apply a CSS class) automatically if the dataSource changes for the ng-grid.

由于没有与该问题相关的示例，我将继续创建自己的解决方案，以便在ng-grid的dataSource更改时自动更新单元格模板（应用CSS类）。

Here is the working plunk. http://run.plnkr.co/plunks/QpDBeHkFAwOtuexVuO5T/

这是工作的插件。 http://run.plnkr.co/plunks/QpDBeHkFAwOtuexVuO5T/

I have moved the logic for applying the cell template from ng-grid to the controller as a function that returns a string which is a CSS class name.

我已经将用于将单元格模板从ng-grid应用到控制器的逻辑移动为一个函数，该函数返回一个CSS类名称的字符串。

This solution will work for any changes to ng-grid's data source as every single time a change happens to the data source, the corresponding angular code will be executed which in turn calls a function inside controller that gets the style data.

该解决方案适用于对ng-grid数据源的任何更改，因为每次数据源发生更改时，都会执行相应的角度代码，而这些代码又会调用获取样式数据的控制器内的函数。

Answer to your question: It all depends on the way we design our cell templates.

回答你的问题：这完全取决于我们设计细胞模板的方式。

Let me know if this doesn't solve your problem.

如果这不能解决您的问题，请告诉我。

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    
    $scope.addBigPerson = function(){
      $scope.myData.push({name:'abc', age: 75});
    }
    
    $scope.addSmallPerson = function(){
      $scope.myData.push({name:'abc', age: 34});
    }
  
    $scope.getClassForPerson = function(age){
      if(age > 40)return 'green';
      return 'red';
    }
  
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
  
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: [{field: 'name', displayName: 'Name'},
                     {field:'age', displayName:'Age', cellTemplate: '<div ng-class="getClassForPerson(row.getProperty(col.field))"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
        };
});

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}

.green {
  background-color: green;
	color: white;
}

.red {
  background-color: red;
	color: white;
}

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
        <button ng-click="addBigPerson()">add big</button>
        <button ng-click="addSmallPerson()">add small</button>
    </body>
</html>

#1