2014-12-18 4 views
0

저는 AngularJS에 완전히 익숙하지 않았으며 제 금액 필드에서 텍스트를 지우는 적절한 방법이 무엇인지 궁금해하고 있었습니까?필드를 클릭 할 때 AngularJS, 일반 텍스트

필자는 필드에 기본값 0.00을 설정했지만 사용자가 필드를 클릭하면 0.00이 사라집니다.

이상적으로이 기능은 기본값으로 만 작동하지만, 새로운 값이 제거되면 걱정할 필요가 없습니다.

나는 인터넷 검색을 시도하고 내가 찾을 수있는 유일한 결과는 내가 원하지 않는 필드에 설정된 클리어 버튼에 대한 것입니다.

는 지금 내 HTML은 다음과 같습니다

<number-only-input input-value="transferitems.cashvalue" input-name="cashvalueinput" /> 

그리고 내 컨트롤러 범위는 다음과 같습니다

$scope.totaltransfervalue = 0.00; 

나는 또한 페이지에 필드를 금액 4 다른 사람에게이 기능을 적용해야합니다.

숫자 만 입력에 대한 나의 지시는 다음과 같습니다

app.directive('numberOnlyInput', function ($filter) { 
    return { 
     restrict: 'EA',   
     template: '<input name="{{inputName}}" ng-model="inputValue" ng-blur="oninputblur()" style="width:100% !important" class="form-control" required />', 
     scope: { 
      inputValue: '=', 
      inputName: '=' 
     }, 
     link: function (scope, element, attrs, ngModelController) {    
      scope.oninputblur= function() { 
       scope.inputValue = $filter('currency')(scope.inputValue, '', 2);      
      }     
      scope.$watch('inputValue', function (newValue, oldValue) { 
       if (newValue == oldValue) { return; } 
       if (!newValue) { 
        scope.inputValue = ""; 
       } else { 
        var arr = String(newValue).split(""); 
        if (arr.length === 0) return; 
        if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return; 
        if (arr.length === 2 && newValue === '-.') return; 
        if (isNaN(newValue)) { 
         scope.inputValue = oldValue; 
        } 
       } 
      }); 
     } 
    }; 
}); 
+1

아마도'placeholder = "0.00"'이 (가) 당신이 찾고있는 것입니까? 사용자가 입력을 시작하면 사라집니다. –

+0

@AndreasArgelius 답장을 보내 주셔서 감사합니다. 추가를 시도했지만 작동하지 않았습니다. 내 업데이트 된 HTML을 참조하십시오. 나는 잘못된 필드를 복사했습니다. 필드는 숫자 전용 입력이지만 입력 값으로 인해 자리 표시자를 추가 할 수 없거나 뭔가 누락되었습니다. – murday1983

+0

잘 작동합니다. 입력 태그에'placeholder' 속성을 추가하기 만하면됩니다. ''은 직접 작성한 지시어인가? 편집하기 전에 정상적인 ''이었습니까? –

답변

1

은 HTML에 대한 작업 placeholder 속성처럼 소리

<input placeholder="{{totalTransferValue}}" input-value="transferitems.cashvalue" input-name="cashvalueinput" /> 

그것은 범위 변수의 현재 값을 표시합니다 사용자가 상자에서 타이핑을 시작할 때 사라지는 희미한 콘텐츠. 이것은 기본값에 국한되지 않습니다. 질문이 근본적으로 변경되었으므로 더 이상 적합하지 않습니다.

지침 자체를 조정하여 원하는 것을 얻을 수 있어야합니다.

첫째, 당신은 다음 핸들러

link: function (scope, element, attrs, ngModelController) {    
    scope.oninputfocus = function(){ 
     // if(scope.inputValue == myDefaultValue) { 
     scope.inputValue = ''; 
     // } 
    }, 
    scope.oninputblur= ... 

를 구현하고 모든 설정해야 템플릿

template: '<input ng-focus="oninputfocus()" ... 

ng-focus를 추가해야합니다. 필드에서 기본값 만 지우는 수표를 (주석으로) 포함 시켰습니다.

+0

+0

@KalhanoToressPamuditha 제발 제 참조 업데이트 된 HTML. 나는 잘못된 필드를 복사했습니다. 필드가 숫자 전용 입력이지만 입력 값으로 인해 자리 표시자를 추가 할 수 없거나 무언가가 누락되었습니다. – murday1983

+0

@Alex 답장을 보내 주셔서 감사합니다. 추가를 시도했지만 작동하지 않았습니다. 내 업데이트 된 HTML을 참조하십시오.나는 잘못된 필드를 복사했습니다. 필드는 number-only-input이지만 입력 값으로 인해 자리 표시자를 추가 할 수 없거나 뭔가 누락되었습니다. – murday1983

관련 문제