selectMatch에서 angular ui-bootstrap auto-ahead 콜백을 실행

selectMatch에서 angular ui-bootstrap auto-ahead 콜백을 실행

angular ui-bootstrap autoahead를 사용하고 있으며 많은 선택 항목을 선택하는 방법으로 사용하고 싶기 때문에 selectMatch 메서드를 실행할 때 선택한 값을 가져와야 하는데 컨트롤러에서 이 방법을 찾을 수 없습니다.

<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

선택한 값을 보면 키를 누를 때마다 거스름돈이 나오고...

scope.$watch('selected', function(newValue, oldValue) {... });

select Match 메서드는 사용자가 Enter 키를 누르거나 목록을 클릭했을 때 호출되는 메서드입니다만, 어떻게 콜백을 할 수 있는지 모르겠습니다.

감사합니다!

지금 더 좋은 방법이 있어요.새로운 콜백 방식이 추가되었습니다.

컨트롤러 파일에서 다음을 추가합니다.

 $scope.onSelect = function ($item, $model, $label) {
    $scope.$item = $item;
    $scope.$model = $model;
    $scope.$label = $label;
};

보기에서 다음을 추가합니다.

 <input type="text"
        ng-model="selected"
        typeahead="state for state in states | filter:$viewValue"
        typeahead-editable="false"
        typeahead-on-select="onSelect($item, $model, $label)"/>

자세한 내용은 자동 검색 사양을 참조하십시오(onSelect 검색).

다음 URL이 http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/에 도움이 되는지 확인하십시오.

http://www.techguides.in/how-to-customize-autocomplete-to-display-multiple-columns-using-angularjs-ui-2/

편집: 이 방법은 현재 최선의 방법이 아닙니다.위의 답변에서 설명한 바와 같이 onSelect 콜백을 사용하는 것이 좋습니다.

나는 내가 원하는 것을 하는 방법을 찾았다.자동 검색 가능한 속성이 있으며, 이 속성이 false로 설정된 경우 모델에서 값을 선택한 경우에만 선택한 값이 변경됩니다.따라서 $watch는 새로운 값이 선택되었을 때 정상적으로 동작합니다.

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" typeahead-editable="false">

link: function(scope, elm, attrs){
    scope.$watch('selected', function(newValue, oldValue) {
        if (newValue)
          console.log(oldValue+"->"+newValue);
     });
}

다음은 HTML 입니다.

 <input id="title" type="text"  ng-model="title"  typeahead="data.enquiry_title for data in titleData | filter:$viewValue | limitTo:8" 
typeahead-on-select='onSelect($item, $model, $label)' />

콜백 기능을 사용하여 입력 태그에 자동 검색 기능을 추가합니다.

컨트롤러 내부에는 다음과 같은 기능이 있습니다.

$scope.onSelect = function ($item, $model, $label) {
            console.log($item);
            if($item.tid)
                $scope.activeTitleId = $item.tid
        };

$item 안에는 제안 목록의 메인 배열에서 전달한 개체 전체가 있습니다.

검증 전에 다음 사항을 시험해 보십시오.

 modelCtrl.$setValidity('editable', true);

언급URL : https://stackoverflow.com/questions/16109364/angular-ui-bootstrap-typeahead-callback-on-selectmatch