Question

如何禁用特定行（例如第一行）上的按钮？我试图根据当前用户的角色在表中显示详细信息。例如-如果是供应商或买方用户，则禁用所有行的编辑和删除按钮。

类似地，如果SUPER-ADMIN使用它，则如何仅禁用FIRST行的DELETE按钮。因为第一行包含超级管理员的详细信息。他不应该删除自己的权利。：p

谢谢。

$scope.checkRole = function () {
    if (localStorage.getItem("currentUser") !== null) {

        var currentUser = JSON.parse(localStorage.getItem("currentUser"));
        console.log("Received", currentUser);
    }
    else {
        console.log("Not received");
    }

    if (currentUser[0].role == "Supplier-User" || currentUser[0].role == "Buyer-User") { 
        return true;
    }
    else {
        return false;
    }
    //if (currentUser[0].role == "Super-Admin") {
        //What should I type here?
    //}
};

<table class="table table-striped table-hover">
    <thead>
        <tr class="table100-head">
            <th>Email</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Contact</th>
            <th>Role</th>
            <th>Company</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <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>
</table>

Answer 1

将$index和迭代器添加为禁用函数的参数：

<tr ng-show="showUser(user)" ng-repeat="user in users | filter: searchUsers"
   <td>
        <button ng-disabled="::disableEdit(user,$index)" type="button"
                class="btn btn-info" data-toggle="modal"
                data-target="#myModalEdit"
                ng-click="editUser(user)">
          Edit
       </button>
    </td>
    <td>
        <button ng-disabled="::disableDelete(user,$index)" type="button"
                class="btn btn-danger" data-toggle="modal"
                data-target="#myModalDelete"
                ng-click="deleteUser(user)">
          Delete
        </button>
    </td>
</tr>

请注意，使用添加的one-time binding运算符（::）可以提高性能。

有关更多信息，请参见AngularJS ng-repeat Directive API Reference - special properties。

禁用第一行上的按钮-AngularJS

1 个答案: