AngularJS：我可以根据变量禁用表单控件吗？

我有三个用户角色（协调员，资源和用户）。我在表单中有几个控件，对于用户应该禁用/只读，但对其他角色不能禁用。AngularJS：我可以根据变量禁用表单控件吗？

在我的作用域中，我有一个变量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>

有人请给我一个更好的办法。

在此先感谢！

来源

2014-05-02 jgravois

[ng-disabled]（https://docs.angularjs.org/api/ng/directive/ngDisabled）？ OMG！ – CodingIntrigue

AngularJS非常复杂和完整。任何人都可以学习它提供的东西。我不知道这存在。 – jgravois

使用ng-disabled属性：

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

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

来源

2014-05-02 12:06:17 CodingIntrigue

在控制器上放置一个函数来处理逻辑，然后使用ng-show或ng-disabled调用该函数。然后你就可以单元测试的功能和你保持你的模板更简洁：

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

来源

2014-05-02 12:04:48 LightningShield

你可以为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对象。

来源

2014-05-02 12:09:30

我打算使用你的清理技术，因为就像你说的那样，它变得更加可读，但是我会像@RGraham建议的那样使用ng-disabled。谢谢！ – jgravois

我看到了 - 我认为这个问题更多的是与简化UI逻辑有关。请记住，ng-show和ng-disabled确实有不同的表现。 ng-show可以隐藏一个控件（display：none），而ng-disabled可以禁用一个控件（灰显）。 –

AngularJS：我可以根据变量禁用表单控件吗？

回答

相关问题