반응형
angular.js를 사용하여 입력 상자를 비활성화하는 방법
편집 보기 및 작성 보기에 이 필드를 사용합니다.
<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 또는 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>" />
이 명령어를 작성했습니다(각도 안정 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라는 추가 속성이 포함되어 있어야 합니다.이 값은 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 디렉티브의 값에 영향을 주는 코드가 포함되어 있을 수 있습니다.
<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"/>
언급URL : https://stackoverflow.com/questions/17402294/how-to-disable-an-input-box-using-angular-js
반응형
'programing' 카테고리의 다른 글
확장할 구성 "반응"을 로드하지 못했습니다. (0) | 2023.03.02 |
---|---|
CoffeeScript 프로젝트를 JavaScript로 변환하시겠습니까(최소화 없이)? (0) | 2023.03.02 |
단순 js 코드에서 angularjs 서비스를 호출합니다. (0) | 2023.03.02 |
ng-repeat에서 Angularjs OrderBy가 작동하지 않음 (0) | 2023.03.02 |
JSX(React)에서 곱슬머리 괄호는 무엇을 의미합니까? (0) | 2023.03.02 |