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