如何使用angular.js禁用輸入框

Question

我正在使用此字段進行編輯視圖和創建視圖

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

在控制器中我有這個代碼來禁用輸入元素：

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

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

請幫忙。

Answer 1

使用ng-disabled或帶有ng-class的特殊CSS 類

<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

您需要使用ng-disabled指令

<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

我為此創建了一個指令（角度穩定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

您的標記應該包含一個名為ng-disabled的附加屬性，其值應該是一個條件或表達式，它將被評估為true或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}"
/>

在控制器中，您可能會有一些代碼會影響ng-disabled指令的值。

Answer 5

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

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