Panteleev Dima Panteleev Dima - 1 year ago 84
Javascript Question

How can i make some of the table rows not selectable in SmartTable angularjs

I am using angularJS and smart table framework to manage my table in html:

  1. The table rows are selectable using SmartTable attribute : st-select-row="row".

  2. after user selects rows and click "add" button the selected data registered to some other list.

  3. I don't want to remove added rows from table but I do want them to be not selectable.

This is code example:


<body ng-app="FarmManagment" ng-controller="mainCtrl">
<table id="Table" class="table table-hover" st-table="displayedCollection" st-safe-src="rowCollection">
<th st-sort="farmName">Farm Name</th>
<th st-sort="FarmDescription">Description</th>
<th st-sort="DataCenter">DC</th>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
<td ng-bind="row.farmName">{{row.farmName}}</td>
<td ng-bind="row.FarmDescription"></td>
<td ng-bind="row.DataCenter"></td>
<button id="add" ng-click="add(displayedCollection)"> add </button>
<ul ng-bind="row.farmName" ng-repeat="row in added"></ul>


var app = angular.module('FarmManagment', ['smart-table']);
app.controller('mainCtrl', function ($scope) {

$scope.rowCollection = [
{farmName: 'farm1', FarmDescription: 'some farm1', DataCenter: 'London'},
{farmName: 'farm2', FarmDescription: 'some farm2', DataCenter: 'Paris'},
{farmName: 'farm3', FarmDescription: 'some farm3', DataCenter: 'Berlin'}

$scope.added = [];

$scope.add = function(rows){
if (row.isSelected === true){
row.isSelected = false;
var index = $scope.added.indexOf(row);
if(index === -1){
// row.disableSelection this is what i want to do


How can I implement such behavior?

plunker code:plunker


Answer Source

You can add condition like

<tr st-select-row="isSelectableRow(row)" st-select-mode="multiple" ng-repeat="row in displayedCollection">

and in the controller

$scope.isSelectableRow = function (row) {
  if (~$scope.added.indexOf(row))
    return false;
    return row;

And also, you have incorrect html


change it to


Working example here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download