Question

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

提前致谢

Answer 1

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

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

我已经将用于将单元格模板从ng-grid应用到controller的逻辑移动为返回string这个CSS类名称的函数。

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

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

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

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>

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

1 个答案: