Angularjs 如何突出显示角度Ui网格中的选定行？

这是我的密码

var-app=angular.module（'app'，['ui.grid'，'ui.grid.edit']）；
app.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.gridOptions={
enableSorting:true，
columnDefs：[
{name:'firstName'，字段：'firstName'}，
{name:'1stFriend'，字段：'friends[0]}，
{名称：'city'，字段：'address.city'}，
],
数据：[
{
“名字”：“考克斯”，
“朋友”：[“friend0”]，
“地址：{街道：“多夫大街301号”，城市：“劳雷尔”，邮编：“39565”}，
},
{
“名字”：“吉姆”，
“朋友”：[“朋友1”]，
“地址：{街道：“123街大街”，城市：“海湾”，邮编：“12457”}，
}
]
};
}]);
通过使用
启用RowHeaderSelection:true
可以启用行选择。我修改了你的代码。下面是：-您的app.js文件如下所示

var app = angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.grid.selection', 'ui.grid.custom.rowSelection']);

app.filter('zip', function() {
  return function(input, entity) {
    if (entity.getZip() > 30000) {
      return 'Yes';
    } else {
      return 'No';
    }
  };
});

app.controller('MainCtrl', ['$scope', function($scope) {

  $scope.gridOptions = {
    enableSorting: true,
    multiSelect: false,
    columnDefs: [{
      name: 'firstName',
      field: 'first-name'
    }, {
      name: '1stFriend',
      field: 'friends[0]'
    }, {
      name: 'city',
      field: 'address.city'
    }, {
      name: 'getZip',
      field: 'getZip()',
      enableCellEdit: false
    }, {
      displayName: 'Zip > 3000',
      field: 'getZip()',
      enableCellEdit: false,
      cellFilter: 'zip:row.entity'
    }],
    data: [{
      "first-name": "Cox",
      "friends": ["friend0"],
      "address": {
        street: "301 Dove Ave",
        city: "Laurel",
        zip: "39565"
      },
      "getZip": function() {
        return this.address.zip;
      }
    }, {
      "first-name": "Jim",
      "friends": ["friend1"],
      "address": {
        street: "123 Street Ave",
        city: "Bay",
        zip: "12457"
      },
      "getZip": function() {
        return this.address.zip;
      }
    }]
  };

}]);

angular.module('ui.grid.custom.rowSelection', ['ui.grid'])

.directive('uiGridCell', function($timeout, uiGridSelectionService) {
  return {
    restrict: 'A',
    require: '^uiGrid',
    priority: -200,
    scope: false,
    link: function($scope, $elm, $attr, uiGridCtrl) {
      if ($scope.col.isRowHeader) {
        return;
      }

      var touchStartTime = 0;
      var touchTimeout = 300;

      registerRowSelectionEvents();

      function selectCells(evt) {
        // if we get a click, then stop listening for touchend
        $elm.off('touchend', touchEnd);

        if (evt.shiftKey) {
          uiGridSelectionService.shiftSelect($scope.grid, $scope.row, evt, $scope.grid.options.multiSelect);
        } else if (evt.ctrlKey || evt.metaKey) {
          uiGridSelectionService.toggleRowSelection($scope.grid, $scope.row, evt, $scope.grid.options.multiSelect, $scope.grid.options.noUnselect);
        } else {
          uiGridSelectionService.toggleRowSelection($scope.grid, $scope.row, evt, ($scope.grid.options.multiSelect && !$scope.grid.options.modifierKeysToMultiSelect), $scope.grid.options.noUnselect);
        }
        $scope.$apply();

        // don't re-enable the touchend handler for a little while - some devices generate both, and it will
        // take a little while to move your hand from the mouse to the screen if you have both modes of input
        $timeout(function() {
          $elm.on('touchend', touchEnd);
        }, touchTimeout);
      };

      function touchStart(evt) {
        touchStartTime = (new Date()).getTime();

        // if we get a touch event, then stop listening for click
        $elm.off('click', selectCells);
      };

      function touchEnd(evt) {
        var touchEndTime = (new Date()).getTime();
        var touchTime = touchEndTime - touchStartTime;

        if (touchTime < touchTimeout) {
          // short touch
          selectCells(evt);
        }

        // don't re-enable the click handler for a little while - some devices generate both, and it will
        // take a little while to move your hand from the screen to the mouse if you have both modes of input
        $timeout(function() {
          $elm.on('click', selectCells);
        }, touchTimeout);
      };

      function registerRowSelectionEvents() {
        $elm.addClass('ui-grid-disable-selection');
        $elm.on('touchstart', touchStart);
        $elm.on('touchend', touchEnd);
        $elm.on('click', selectCells);
      }
    }
  };
})

var-app=angular.module（'app'，['ui.grid'，'ui.grid.edit'，'ui.grid.selection'，'ui.grid.custom.rowSelection']）；
app.filter（'zip'，function（）{
返回函数（输入、实体）{
if（entity.getZip（）>30000）{
返回“是”；
}否则{
返回“否”；
}
};
});
app.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.gridOptions={
enableSorting:true，
多选：错，
columnDefs：[{
姓名：'firstName'，
字段：“名字”
}, {
名称：“1stFriend”，
字段：“朋友[0]”
}, {
名称：'城市'，
字段：“地址。城市”
}, {
名称：“getZip”，
字段：“getZip（）”，
enableCellEdit:false
}, {
displayName:'Zip>3000'，
字段：“getZip（）”，
enableCellEdit:false，
cellFilter:'zip:row.entity'
}],
数据：[{
“名字”：“考克斯”，
“朋友”：[“friend0”]，
“地址”：{
街道：“多夫大街301号”，
城市：“月桂”，
邮政编码：“39565”
},
“getZip”：函数（）{
返回this.address.zip；
}
}, {
“名字”：“吉姆”，
“朋友”：[“朋友1”]，
“地址”：{
街道：“123街大街”，
城市：“海湾”，
邮政编码：“12457”
},
“getZip”：函数（）{
返回this.address.zip；
}
}]
};
}]);
angular.module（'ui.grid.custom.rowSelection'，['ui.grid']））
.directive（'uiGridCell'，function（$timeout，uiGridSelectionService）{
返回{
限制：“A”，
要求：“^uiGrid”，
优先次序：-200，
范围：假，
链接：函数（$scope、$elm、$attr、uiGridCtrl）{
if（$scope.col.isRowHeader）{
返回；
}
var touchStartTime=0；
var-touchTimeout=300；
registerRowSelectionEvents（）；
功能选择单元（evt）{
//如果我们得到一个点击，那么停止收听touchend
$elm.off（'touchend'，touchend）；
if（evt.shiftKey）{
uiGridSelectionService.shiftSelect（$scope.grid，$scope.row，evt，$scope.grid.options.multiSelect）；
}else if（evt.ctrlKey | | evt.metaKey）{
uiGridSelectionService.toggleRowSelection（$scope.grid，$scope.row，evt，$scope.grid.options.multiSelect，$scope.grid.options.noUnselect）；
}否则{
uiGridSelectionService.toggleRowSelection（$scope.grid，$scope.row，evt，（$scope.grid.options.multiSelect&&！$scope.grid.options.Modifierkeystommultiselect），$scope.grid.options.noUnselect）；
}
$scope.$apply（）；
//暂时不要重新启用touchend处理程序-有些设备会同时生成这两个处理程序，而且会
//如果您有两种输入模式，请花一点时间将手从鼠标移动到屏幕
$timeout（函数（）{
$elm.on（'touchend'，touchend）；
}，触摸超时）；
};
功能触摸启动（evt）{
touchStartTime=（新日期（））.getTime（）；
//如果我们得到一个触摸事件，那么停止收听点击
$elm.off（'单击'，选择单元格）；
};
功能触摸端（evt）{
var touchEndTime=（新日期（））.getTime（）；
var touchTime=touchEndTime-touchStartTime；
如果（触摸时间<触摸超时）{
//短接触
选择细胞（evt）；
}
//暂时不要重新启用click处理程序-有些设备会同时生成这两个处理程序，而且会
//如果您有两种输入模式，请花一点时间将手从屏幕移动到鼠标
$timeout（函数（）{
$elm.on（'单击'，选择单元格）；
}，触摸超时）；
};
函数注册表rRowSelectionEvents（）{
$elm.addClass（'ui-grid-disable-selection'）；
$elm.on（'touchstart'，touchstart）；
$elm.on（'touchend'，touchend）；
$elm.on（'单击'，选择单元格）；
}
}
};
})

现在让我们修改您的html页面：-

<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="gridOptions" ui-grid-selection ui-grid-edit class="grid"></div>
  </div>


  <script src="app.js"></script>
</body>

</html>



我还编辑了您的plunker：-

谢谢。
如果您向网格中添加了指令ui网格选择，您将获得om LHS列来选择行

然后可以像这样添加样式（添加栅格Id）：

您的plunker将更新为答案：

不使用rowHeaderSelection属性，因为在我的网格中不包含rowHeaderSelectionHi durga，我也更新了答案和plunker。让我们检查一下。它是否有用？当我放置enableRowHeaderSelection时：false，不起作用。因为在我的网格中，行标题选择不显示。您如何选择行。在您的plunker中，我没有找到任何行选择代码
 #grid1 .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
    background-color: red;
 }