How do I disable Buttons on a specific row in a table Angular JS

Question

I am trying to display users in a table along with edit and delete buttons on each row. Below I have added a sample array.

So when a role- "Super-Admin" logins, I need to disable his row's delete button. So that he won't delete himself right. Whereas the next rows' buttons should not be disabled. I'm kinda new to angular JS. Looking for guidance. Thanks in advance.

if (localStorage.getItem("users") === null) {
  $scope.users = [{
      email: "[email protected]",
      password: "Sha123",
      firstName: "Vai",
      lastName: "LSha",
      contact: "123-223-8989",
      role: "Super-Admin",
      company: ""
    },
    {
      email: "[email protected]",
      password: "Rick123",
      firstName: "Rick",
      lastName: "Fraiser",
      contact: "987-283-2489",
      role: "Supplier-User",
      company: "Oneplus"
    }
  ];
  localStorage.setItem("users", JSON.stringify($scope.users));
} else {
  $scope.users = JSON.parse(localStorage.getItem("users"));
}

<tbody>
  <tr ng-if="showUser(user)" ng-repeat="user in users | filter: searchUsers track by $index">
    <td>{{user.email}}</td>
    <td>{{user.firstName}}</td>
    <td>{{user.lastName}}</td>
    <td>{{user.contact}}</td>
    <td>{{user.role}}</td>
    <td>{{user.company}}</td>
    <td>
      <button ng-disabled="checkRole()" type="button" class="btn btn-info" data-toggle="modal" data-target="#myModalEdit" ng-click="selectUser(user)">Edit</button>
    </td>
    <td>
      <button ng-disabled="checkRole()" type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" ng-click="selectUser(user)">Delete</button>
    </td>
  </tr>
</tbody>

don't use a function to do this; the function will be called every time the DOM is updated, and cause slowdowns. Add a property to the user to check against instead. — Claies
– Claies, Commented Nov 19, 2018 at 19:37

Kurohige · Accepted Answer · 2018-11-19 20:32:25Z

1

Try to disable the button if user.role='Super-Admin':

<button [attr.disabled]="user.role=='Super-Admin'? '' : null" ng-disabled="checkRole()" 
type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModalDelete" 
ng-click="selectUser(user)">Delete</button>

Don't know if it works with this specific example, I'll test it.

UPDATE

I've tested it on angularjs 1.7.5 and a solution could be adding (in your case) multiple expression in ng-disable directive like so:

<button ng-disabled="user.role=='Super-Admin' || checkRole()" 
type="button" class="btn btn-danger" data-toggle="modal" data- 
target="#myModalDelete" 
ng-click="selectUser(user)">Delete</button>

or

<button ng-disabled="user.role=='Super-Admin' && checkRole()" 
type="button" class="btn btn-danger" data-toggle="modal" data- 
target="#myModalDelete" 
ng-click="selectUser(user)">Delete</button>

depends on what checkRole() function returns.

edited Nov 19, 2018 at 20:32

answered Nov 19, 2018 at 19:45

Kurohige

1,4262 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vaibhav27 Over a year ago

Thank you! It works perfectly. How do I add another OR condition like: ng-disabled="user.role=='Super-Admin' || 'Supplier-Admin' || checkRole()" ?

Vaibhav27 Over a year ago

Well. I tried that. Its not working. It just disables all the delete buttons on every row. I even tried like this: ng-disabled="user.role==('Super-Admin' || 'Supplier-Admin') || checkRole()". Still it doesn't work.

Kurohige Over a year ago

ng-disabled="(user.role=='Super-Admin' || user.role== 'Supplier-Admin') || checkRole()"

Ashrik Ahamed · Accepted Answer · 2023-04-09 11:51:42Z

I fixed this issue by introducing new boolean property in dataSource to control the buttons states in each row of the table.

Here is my html code of the button:

<ng-container matColumnDef="action">
              <th mat-header-cell *matHeaderCellDef class="a-center">Serials</th>
              <td mat-cell *matCellDef="let element" class="a-center">

                <button [disabled]="element.isSerialBtn" (click)="onAddItem()" type="button" mat-icon-button class="mat-icon-button" title="invoice">
                  <mat-icon svgIcon="invoice"></mat-icon>
                </button>

              </td>
              <td mat-footer-cell *matFooterCellDef></td>
            </ng-container>

The default value of that boolean will be set as false at the object creation time, but when we need it to disable the button just make it true, in my case:

accptedQty(toItemBd: ToItemBd) {
    const acceptedQty = this.formItems.getRawValue()['acc_qty_' + toItemBd.id];

    if (toItemBd.batchQty == acceptedQty) {
  
      toItemBd.isSerialBtn=true


  }

Collectives™ on Stack Overflow

How do I disable Buttons on a specific row in a table Angular JS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related