是否有可能在ng-grid中更改单元格值的变化？

Question

我设置了一个网格来显示一些输入值和计算值。

单元格都使用基于最新默认模板的自定义模板，只是更改可编辑单元格的颜色：

<div class="ngCellText"
     ng-class="col.colIndex() + (col.enableCellEdit ? ' blueCel' : '')"
     style="text-align:right"
     title="{{COL_FIELD}}">
  <span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span>
</div>

看起来像这样：

接下来，我的任务是添加一个轻微的动画，就像细胞背景闪烁绿色然后渐变回白色，只要值发生变化。我对角度很新，所以我不知道从哪里开始。我见过的使用ng-animate（列表添加/删除，元素显示/隐藏等）的示例似乎都没有转化为这种情况。

有人可以指出我正确的方向，可能是div或span动画的一个例子，以响应其内部HTML的变化吗？

Answer 1

您要做的是指令。该指令需要简单地为要闪存的项目指定一个值，并且将自己观察要更改的值。你可以用CSS做动画，角度处理CSS的方式很漂亮。您可以像这样创建指令......

module.directive('customDirective', ['$compile', function($compile,) {
    return {
        transclude: true,
        scope: {
            resource: '='
        },
        link: function(scope, element, attrs){
            //All the logic for assigning the value here.
            scope.flash = true;

        }
    });

接下来，您将要创建一个模板，您可以在其中插入此指令。

<div custom-directive ng-show="flash" class="fadein fadeout" resource="row.getProperty(\'resource\')"></div>

在网格中使用该模板，如此

$scope.gridOptions = { 

    data: 'dataFromService',

    columnDefs: [{field:'column', displayName:'Some Column', cellTemplate:
        '<div custom-directive ng-show="flash" class="fadein fadeout"resource="row.getProperty(\'resource\')"></div>'}
                 ],
    }

这里更重要的部分之一是课程增加（fadein和fadeout） 最后是完成大部分工作的CSS。

fadein.ng-hide-remove,
.fadeout.ng-hide-add {
    -webkit-transition: 400ms ease-in-out all;
    -moz-transition: 400ms ease-in-out all;
    -o-transition: 400ms ease-in-out all;
    transition: 400ms ease-in-out all;
    display: block !important;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

虽然这不完全是你需要的CSS，但它会为你提供你需要做的基本设置。此代码来自闪烁的保存按钮，仅在有人保存资源时显示。