source

클릭 시 앵글을 사용하여 텍스트 입력 지우기JS

nicesource 2023. 2. 10. 22:03
반응형

클릭 시 앵글을 사용하여 텍스트 입력 지우기JS

angularJS를 사용하여 버튼을 클릭할 때 텍스트 입력을 지우려면 어떻게 해야 합니까?

검색 입력

X는 개별 링크이며, 이 링크에서 함수를 트리거하고 싶습니다.

HTML

<input type="text" class="form-control" data-ng-model="searchAll">
<a class="clear" data-ng-click="clearSearch()">X</a>

클릭 이벤트에서 스코프 모델 값을 클리어하기만 하면 됩니다.

<input type="text" ng-model="searchAll" />
<a class="clear" ng-click="searchAll = null">
    <span class="glyphicon glyphicon-remove"></span>
</a>

또는 컨트롤러의$scope기능하고, 거기서 클리어 합니다.컨트롤러가 올바르게 설정되어 있는지 확인합니다.

$scope.clearSearch = function() {
    $scope.searchAll = null;
}
$scope.clearSearch = function () {
    $scope.searchAll = "";
};

http://jsfiddle.net/nzPJD/

인라인 JS를 사용하지 않고 작업을 수행할 수 있는 방법에 대한 JsFiddle.

보다 쉽고 짧은 방법은 다음과 같습니다.

 <input type="text" class="form-control" data-ng-model="searchAll">
 <a class="clear" data-ng-click="searchAll = '' ">X</a>

이건 항상 나한테 효과가 있었어요.

전체 양식을 정리하려면 이러한 방법을 사용할 수 있습니다.컨트롤러에 들어가는 모델은 다음과 같습니다.

    $scope.registrationForm = {
    'firstName'     : '',
    'lastName'      : ''
};

HTML:

<form class="form-horizontal" name="registrForm" role="form">
   <input type="text" class="form-control"
                       name="firstName"
                       id="firstName"
                       ng-model="registrationForm.firstName"
                       placeholder="First name"
                       required> First name
   <input type="text" class="form-control"
                       name="lastName"
                       id="lastName"
                       ng-model="registrationForm.lastName"
                       placeholder="Last name"
                       required> Last name
</form>

다음으로 클리어 스테이트를 클로닝/저장합니다.

$scope.originForm = angular.copy($scope.registrationForm);

리셋 기능은 다음과 같습니다.

$scope.resetForm = function(){
    $scope.registrationForm = angular.copy($scope.originForm); // Assign clear state to modified form 
    $scope.registrForm.$setPristine(); // this line will update status of your form, but will not clean your data, where `registrForm` - name of form.
};

이렇게 하면 폼 전체를 정리할 수 있습니다.

클릭 시 텍스트 필드를 클리어/리셋하는 가장 쉬운 방법은 스코프를 클리어/리셋하는 것입니다.

<input type="text" class="form-control" ng-model="searchAll" ng-click="clearfunction(this)"/>

컨트롤러 내

$scope.clearfunction=function(event){
   event.searchAll=null;
}

로버트의 대답에서 영감을 얻었지만, 우리가 사용했을 때,

ng-click="searchAll = null"필터에서 모델 값을 다음과 같이 만듭니다.null그 결과, 검색은 통상의 기능으로는 동작하지 않기 때문에, 이 기능을 사용하는 것이 좋습니다.ng-click="searchAll = ''"대신

컨트롤러 내

$scope.clearSearch = function() {
     $scope.searchAll = '';
}

이거 드셔보세요.

 this.searchAll = element(by.xpath('path here'));
 this.searchAll.sendKeys('');

언급URL : https://stackoverflow.com/questions/21708689/clear-text-input-on-click-with-angularjs

반응형