Angularjs ng-grid 动态突出显示行答案

【问题标题】：Angularjs ng-grid Highlight row dynamicallyAngularjs ng-grid 动态突出显示行
【发布时间】：2016-09-24 20:30:00
【问题描述】：

我有关注 ng-grid。

  $scope.IssueGrid = {
            data: 'IssueGridList',
            multiSelect: false,
            selectedItems: $scope.selectedRow,
            enableColumnResize: true,
            enableRowSelection: true,
            headerRowHeight: 65,
            columnDefs: [

                { field: 'Item', width: '25%', displayName: 'Item Name' },
                { field: 'RequiredQuantity', displayName: 'Requested Qty', cellTemplate: '<div style="text-align:right;"  class="ngCellText">{{row.getProperty(col.field)}}</div>' },
                { field: '', width: '7%', displayName: 'To be Issued', cellTemplate: '<div class="ngCellText {{row.entity.cellClass}}"> <input type="text" id="issQty" style="text-align:right;" data-ng-change="editIssueQty(row)" data-ng-model="row.entity.IssueQty" number-only-input input-value = "row.entity.IssueQty" class="form-control" data-ng-disabled="issueQtyDisabled(row.entity)" value = {{row.getProperty(col.IssueQty)}} /></div>' },
                ],
            showFooter: true
        };

这个网格有文本框可以输入“IssueQty”。但是，当输入值时已发出数量，如果大于“RequiredQuantity”，则整行应突出显示。

任何人都可以提出一种方法来实现这一点..

感谢和问候。

【问题讨论】：

你可以为“IssueQty”变量设置一个监视函数，然后如果值发生变化，使用 ng-class 应用 CSS 类。
@NehaSaggam.. 无法放置监视语句，因为“IssueQty”在单元格模板中。任何其他建议..谢谢..

标签： javascript angularjs ng-grid

【解决方案1】：

考虑使用rowTemplate（参见Row Templates），它使用ng-class 和row.getProperty 为整行设置“突出显示”类。

rowTemplate:'<div ng-style="rowStyle(row)" ng-class="{highlighted: row.getProperty(\'IssueQty\') > row.getProperty(\'RequiredQuantity\') }"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                       '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>' +
                       '<div ng-cell></div>' +
                 '</div></div>'

(function() {
  "use strict";

  angular
    .module("myApp", ['ngGrid'])
    .controller("MyCtrl", ['$scope', MyCtrl]);

  function MyCtrl($scope) {
    $scope.IssueGridList = [
      {Item:'test1', RequiredQuantity:1, IssueQty:0},
      {Item:'test2', RequiredQuantity:2, IssueQty:0}
    ];

    $scope.IssueGrid = {
      data: 'IssueGridList',
      multiSelect: false,
      //selectedItems: $scope.selectedRow,
      enableColumnResize: true,
      enableRowSelection: true,
      showFooter: true,
      columnDefs: [

                { field: 'Item', width: '25%', displayName: 'Item Name' },
                { field: 'RequiredQuantity', width:'25%', displayName: 'Requested Qty', cellTemplate: '<div style="text-align:right;"  class="ngCellText">{{row.getProperty(col.field)}}</div>' },
                { field: '', width: '50%', displayName: 'To be Issued', cellTemplate: '<div class="ngCellText {{row.entity.cellClass}}"> <input type="text" id="issQty" style="text-align:right;" data-ng-change="editIssueQty(row)" data-ng-model="row.entity.IssueQty" number-only-input input-value = "row.entity.IssueQty" class="form-control" data-ng-disabled="issueQtyDisabled(row.entity)" value = {{row.getProperty(col.IssueQty)}} /></div>' },
                ],
        
        rowTemplate:'<div ng-style="rowStyle(row)" ng-class="{highlighted: row.getProperty(\'IssueQty\') > row.getProperty(\'RequiredQuantity\') }"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
                           '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div>' +
                           '<div ng-cell></div>' +
                     '</div></div>'
    };
  }

})();

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 500px; 
    height: 300px;
}
.highlighted {
  background-color: yellow;
}

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="gridStyle" ng-grid="IssueGrid"></div>
</div>

【讨论】：

【解决方案2】：

你可以在你的代码中尝试这样的事情 -

        <input type="text" ng-style="{'background-color':'{{change}}'}" ng-change="anyFunction()">

在控制器中，您可以编写一个函数来更改特定文本框的 css。就像 -

          .controller('myApp',['$scope',function($scope){
           $scope.change = /*any default value of color here*/
           $scope.anyFunction = function{
             /*if(required value greater than the demo quantity)
                  then change = /*your desired color*/;
             */
           }

             ])

【讨论】：