AngularJS: Can I disable a form control based on a variable?

Question

I have three user roles (Coordinator, Resource, and User). I have several controls in a form that should be disabled/read-only for the User but not disabled for the other roles.

In my scope I have a variable of current_user[0].role with possible values of co, re, us respectively.

I am currently using ng-show and duplicating the control but these forms are getting very long and complex and I KNOW THERE HAS TO BE A BETTER WAY.

Here's what I'm using now:

<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>

Someone PLEASE show me a better way.

Thanks in advance!

OMG! AngularJS is so complex and complete. How can anyone ever learn what it offers. I did not know this existed. — jgravois
– jgravois, Commented May 2, 2014 at 12:06

CodingIntrigue · Accepted Answer · 2014-05-02 12:06:17Z

2

Using the ng-disabled attribute:

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

This will add the disabled attribute when current_user[0].role=='us' is matched. For every HTML attribute, there is normally an ng-* equivalent.

answered May 2, 2014 at 12:06

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

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

Comments

anon · Accepted Answer · 2014-05-02 12:04:48Z

2

Put a function on your controller to deal with the logic, then call that function using ng-show or ng-disabled. Then you can unit test that function and you keep your templates less cluttered:

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

answered May 2, 2014 at 12:04

anon

Comments

Gruff Bunny · Accepted Answer · 2014-05-02 12:09:30Z

1

You could add properties onto your scope for each of the 3 possible roles:

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

The view then becomes much more readable:

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

If the current_user can change within the view you can add a watch on the current_user and update the properties as appropriate.

You could even add those properties to the current_user object.

answered May 2, 2014 at 12:09

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

2 Comments

jgravois Over a year ago

I am going to use your clean-up technique because as you said it becomes so much more readable but then I will use ng-disabled as @RGraham suggested. Thanks!

Gruff Bunny Over a year ago

I see - I thought the question was more to do with simplifying the UI logic. Remember that ng-show and ng-disabled do behave differently; ng-show can hide a control (display:none) and ng-disabled can disable a control (grey it out).

Collectives™ on Stack Overflow

AngularJS: Can I disable a form control based on a variable?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related