Angularjs ng-grid Podświetlaj wiersz dynamicznie

Question

Mam następujące 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 
     }; 

Ta siatka ma pole tekstowe do wprowadzenia "IssueQty". Ale jeśli kiedykolwiek zostanie wprowadzona wartość do Wydana ilość, jeśli jest większa niż "Wymagana ilość", cały wiersz powinien być podświetlony.

Czy ktoś może zaproponować sposób, aby osiągnąć ten ..

Dzięki i pozdrowienia.

Answer 1

rozważyć użycie a rowTemplate (patrz Row Templates), który używa ng-class i row.getProperty, aby ustawić klasę "podświetlania" dla całego wiersza.

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>

Answer 2

Można spróbować coś takiego w kodzie -

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

iw sterowniku można napisać funkcję, aby zmienić css tego konkretnego textbox.Like -

  .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*/; 
      */ 
      } 

      ])