How to disable an input box using angular.js

Question

I am using this field for an edit view and a create view

<input data-ng-model="userInf.username" class="span12 editEmail" type="text" placeholder="[email protected]" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required />

in the controller I have this code to disable the input element:

function($rootScope, $scope, $location, userService) { //etc $(".editEmail" ).attr("disabled", disable); // no idea how to do in angular }

Please help.

@maqjav The question specifically declares that the solution should be provided in AngularJS terms, not jQuery. — Stewie, CommentedJul 1, 2013 at 10:38

EpokK · Accepted Answer · 2013-07-01 10:50:19Z

Use ng-disabled or a special CSS class with ng-class

<input data-ng-model="userInf.username" class="span12 editEmail" type="text" placeholder="[email protected]" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required ng-disabled="{expression or condition}" />

ssuperczynski · Accepted Answer · 2015-06-08 09:44:09Z

You need to use ng-disabled directive

<input data-ng-model="userInf.username" class="span12 editEmail" type="text" placeholder="[email protected]" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required ng-disabled="<expression to disable>" />

this is old , but you were first and have the exact same correct answer I don't understand all the upvotes on the other answer — Scott Selby, CommentedMar 22, 2015 at 4:39

user2672859 · Accepted Answer · 2013-10-04 20:14:58Z

I created a directive for this (angular stable 1.0.8)

<input type="text" input-disabled="editableInput" /> <button ng-click="editableInput = !editableInput">enable/disable</button> app.controller("myController", function(){ $scope.editableInput = false; }); app.directive("inputDisabled", function(){ return function(scope, element, attrs){ scope.$watch(attrs.inputDisabled, function(val){ if(val) element.removeAttr("disabled"); else element.attr("disabled", "disabled"); }); } });

I have to use angular 1.0.8 which doesn't have ng-disabled directive, so this was useful! — Tomas Romero, CommentedApr 1, 2014 at 13:13

Prashobh · Accepted Answer · 2015-08-05 09:49:51Z

Your markup should contain an additional attribute called ng-disabled whose value should be a condition or expression that would evaluate to be either true or false.

 <input data-ng-model="userInf.username" class="span12 editEmail" type="text" placeholder="[email protected]" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required ng-disabled="{condition or expression}" />

And in the controller you may have some code that would affect the value of ng-disabled directive.

user4391325 · Accepted Answer · 2014-12-24 10:14:48Z

<input type="text" input-disabled="editableInput" /> <button ng-click="editableInput = !editableInput">enable/disable</button> app.controller("myController", function(){ $scope.editableInput = false; }); app.directive("inputDisabled", function(){ return function(scope, element, attrs){ scope.$watch(attrs.inputDisabled, function(val){ if(val) element.removeAttr("disabled"); else element.attr("disabled", "disabled"); }); } });

A bit of explanation would be helpful.
– ouflak
CommentedDec 24, 2014 at 10:23 — ouflak, CommentedDec 24, 2014 at 10:23

vinodh · Accepted Answer · 2015-03-30 10:17:12Z

<input data-ng-model="userInf.username" class="span12 editEmail" type="text" placeholder="[email protected]" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required ng-disabled="true"/>

A bit of explanation would be helpful.
– Felipe Volpatto
CommentedJul 21, 2016 at 22:03 — Felipe Volpatto, CommentedJul 21, 2016 at 22:03

Collectives™ on Stack Overflow

How to disable an input box using angular.js

6 Answers 6

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Linked

Related