如何使用angular.js禁用input框
我正在使用此字段的编辑视图和创build视图
<input data-ng-model="userInf.username" class="span12 editEmail" type="text" placeholder="me@example.com" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" required /> 在控制器中我有这个代码来禁用input元素：
function($rootScope, $scope, $location, userService) { //etc $(".editEmail" ).attr("disabled", disable); // no idea how to do in angular }
请帮忙。
使用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}" />
你需要使用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>" />
我为此创build了一个指令（angular度稳定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的附加属性，它的值应该是一个条件或者expression式，可以是真或者假。
<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指令的值。
<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"); }); } });
<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"/>
