Come disattivare una casella di input usando angular.js

Question

Sto usando questo campo per una visione di modifica e un CREATE VIEW

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

nel controller ho questo codice per disattivare l'elemento di input:

function($rootScope, $scope, $location, userService) 
{ 

//etc 
    $(".editEmail").attr("disabled", disable); // no idea how to do in angular 
} 

Per favore aiuto.

Answer 1

Utilizzare ng-disabled o una classe CSS speciale con ng-class

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

Answer 2

è necessario utilizzare ng-disabled direttiva

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

Answer 3

ho creato una direttiva per questo (angolare stabile 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"); 
    }); 
    } 
}); 

Answer 4

<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"); 
    }); 
    } 
}); 

Answer 5

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

Answer 6

Il tuo markup deve contenere un attributo aggiuntivo chiamato ng-disabled il cui valore deve essere una condizione o un'espressione che potrebbe essere true o false.

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

E nel regolatore si può avere un codice che possa modificare il valore della direttiva ng-disabled.