Question

我有三个用户角色（协调员，资源和用户）。我在表单中有几个控件，应该为用户禁用/只读，但不为其他角色禁用。

在我的范围内，我有一个变量current_user [0] .role，可能的值分别为co，re，us。

我目前正在使用ng-show并复制控件，但这些表格变得越来越复杂，我知道这是一个更好的方式。

以下是我现在正在使用的内容：

<div class="row">
    <div class="form-group col-lg-6">
        <label for="">Time on Task</label>
        <input type="text" ng-model="TOT" ng-show="current_user[0].role=='co' || current_user[0].role=='re'" />
        <input type="text" ng-model="TOT" disabled="disabled" ng-show="current_user[0].role=='us'" />
    </div>
</div>

有人请告诉我一个更好的方法。

提前致谢！

Answer 1

在控制器上放置一个处理逻辑的函数，然后使用ng-show或ng-disabled调用该函数。然后，您可以对该功能进行单元测试，并使模板不会变得混乱：

$scope.checkUserRole = function(current_user){
    return current_user[0].role=='co' || current_user[0].role=='re';
};

Answer 2

使用ng-disabled属性：

<input type="text" ng-model="TOT" ng-disabled="current_user[0].role=='us'" />

这将在disabled匹配时添加current_user[0].role=='us'属性。对于每个HTML属性，通常都有ng-*等效项。

Answer 3

您可以为3个可能的角色中的每个角色添加属性：

$scope.isCoordinator = current_user[0].role=='co';
$scope.isResource = current_user[0].role=='re';
$scope.isUser = return current_user[0].role=='us';

然后视图变得更具可读性：

<input type="text" ng-show="isCoordinator || isResource " />

如果current_user可以在视图中更改，您可以在current_user上添加监视并根据需要更新属性。

您甚至可以将这些属性添加到current_user对象。

AngularJS：我可以基于变量禁用表单控件吗？

3 个答案: