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.

Answer 1

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}" /> 

Answer 2

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