Angular에서 텍스트를 지우는 방법UI 자동 검색 입력

Angular에서 텍스트를 지우는 방법UI 자동 검색 입력

자동 검색 입력이 있습니다.입력 텍스트는 자동 검색에서 선택한 옵션으로 설정됩니다.그러나 자동 검색에서 옵션 중 하나를 선택한 후 이 텍스트를 지우고 텍스트 상자에 "플레이스 홀더" 값을 다시 표시합니다(선택한 값을 다른 div에 추가하기 때문입니다).selectMatch()방법.

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

Id를 사용하여 입력 요소의 텍스트 값과 자리 표시자 값을 설정하려고 했지만 다음과 같이 작동하지 않았습니다.

// the input text was still the 
$('#searchTextBoxId').attr('placeholder', 'HELLO');

선택된 결과

// the input text was still the selected result
$('#searchTextBoxId').val('');

텍스트 값을 설정 또는 리셋하려면 어떻게 해야 합니까?

나도 오랫동안 이것에 대한 답을 찾고 있었다.나는 마침내 나에게 맞는 결심을 찾았다.

NgModel을 빈 문자열로 설정했습니다.typeahead-on-select속성:

---

고객님의 고객명typeahead-on-select속성 추가asyncSelected = '';다음과 같이 선택한 기능 뒤에 있습니다.

<input ...
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" />

최종 자동 검색 기능은 다음과 같습니다.

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" 
    typeahead-min-length="3"
    typeahead-wait-ms="500">

---

Fiddle adding each selection to an array

사실 이 문제는 자동 검색에서 비롯된 것이 아닙니다.에 관한 일반적인 문제ng-model, scope and dot notation.

Angular의 스코프 상속 참조

고객님의 경우 모델명을 다음과 같이 변경하시면 됩니다.xx.selectedautoahead-on-select 콜백에서 dot-selected를 지정하고 xx.selected를 공백으로 설정합니다.

값을 설정 또는 리셋하려면 코드에 따라 비동기 선택되는 ng-model 값에 액세스하지 않겠습니까?컨트롤러 내:

$scope.asyncSelected = '';

@Asok의 답변은 즉시 값을 클리어 할 필요가 있다면 괜찮지만, 저 자신이나 질문 제목에 근거해 이곳에 온 다른 사람 등에게는 @hey의 답변이 더 좋을지도 모릅니다(간단한 경우).

자동 검색을 다음과 같이 변경했습니다.

<input id="searchTextBoxId" type="text" 
    ng-model="myNewVar.asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(myNewVar.asyncSelected)" typeahead-min-length="3"
    typeahead-wait-ms="500">

그러면 컨트롤러에서 입력을 클리어해야 할 때마다

$scope.myNewVar.asyncSelected = '';

이미 jnthnjns의 답변에 따라 ng-model 값을 빈 문자열로 설정하고 있었지만 (의도적으로) 를 사용하고 있었기 때문에 선택 팝업이 사라지지 않았습니다.typeahead-min-length="0"사용자가 선택지를 쉽게 볼 수 있도록 했습니다.

선택을 하기 위해 Enter 키를 누른 것이 실제로 박스를 해제하고 클릭 한 번만으로 박스가 남아있다는 것을 알게 되었습니다.본 UI 자동 검색 코드 탐색

// return focus to the input element if a match was selected via a mouse click event
// use timeout to avoid $rootScope:inprog error
if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
   $timeout(function() { element[0].focus(); }, 0, false);
}

설정하자마자typeahead-focus-on-select="false"그러면 선택(및 모델 삭제) 즉시 상자가 닫힙니다.지금은 분명해 보이지만, 나는 그 옵션을 전에 본 적이 있지만, 자동적으로 포커스를 선택하는 것(또는 그와 비슷한 것)이라고 읽었습니다.다른 사람에게 도움이 될지 모르니까 이걸 답으로 붙이는 거죠

언급URL : https://stackoverflow.com/questions/22104498/how-to-clear-text-from-angularui-typeahead-input