jQuery 如何使用 angular.js 禁用输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17402294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable an input box using angular.js
提问by Prashobh
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.
请帮忙。
回答by EpokK
Use ng-disabledor a special CSS class with ng-class
使用ng-disabled或带有ng-class的特殊 CSS类
<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}"
/>
回答by Arun P Johny
You need to use ng-disableddirective
您需要使用ng-disabled指令
<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>" />
回答by user2672859
I created a directive for this (angular stable 1.0.8)
我为此创建了一个指令（角度稳定 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");
});
}
});
回答by GANESHRAM KS
Your markup should contain an additional attribute called ng-disabledwhose value should be a condition or expression that would evaluate to be either true or false.
您的标记应该包含一个名为ng-disabled的附加属性，其值应该是一个条件或表达式，其计算结果为 true 或 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.
在控制器中，您可能有一些代码会影响 ng-disabled 指令的值。
回答by user4391325
<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");
});
}
});
回答by vinodh
<input data-ng-model="userInf.username" class="span12 editEmail" type="text" placeholder="[email protected]" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required ng-disabled="true"/>
