Issue
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: "Vai@yahoo.com",
password: "Sha123",
firstName: "Vai",
lastName: "LSha",
contact: "123-223-8989",
role: "Super-Admin",
company: ""
},
{
email: "Rick@yahoo.com",
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>
Solution
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.
Answered By - Kurohige
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.