如何使用 angular.js 禁用输入框答案

【问题标题】：How to disable an input box using angular.js如何使用 angular.js 禁用输入框
【发布时间】：2013-06-28 10:41:47
【问题描述】：

我将此字段用于编辑视图和创建视图

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

请帮忙。

【问题讨论】：

你需要使用ng-disabled
@maqjav 这个问题特别声明应该用 AngularJS 术语提供解决方案，而不是 jQuery。
@Stewie 你是对的。我删除评论；）

标签： javascript jquery angularjs

【解决方案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}"
/>

【讨论】：

【解决方案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>" />

【讨论】：

这是旧的，但你是第一个并且有完全相同的正确答案我不明白其他答案的所有赞成票

【解决方案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");
    });
  }
});

【讨论】：

我必须使用没有 ng-disabled 指令的 angular 1.0.8，所以这很有用！

【解决方案4】：

您的标记应该包含一个名为 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="{condition or expression}"
/>

在控制器中你可能有一些代码会影响 ng-disabled 指令的值。

【讨论】：

【解决方案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");
    });
  }
});

【讨论】：

解释一下会有所帮助。

【解决方案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"/>

【讨论】：

解释一下会有所帮助。