[angularjs] selectMatch에서 각도 ui-bootstrap typeahead 콜백?

각진 ui-bootstrap typeahead를 사용하고 있으며 많은 선택 항목을 선택하는 방법으로 사용하고 싶으므로 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) {... });

selectMatch 메서드는 사용자가 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 콜백을 사용하는 것이 좋습니다.

내가 원하는 것을 어떻게 할 수 있는지 발견했습니다. typeahead-editable 속성이 있고 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)' />

콜백 함수로 입력 태그 에 typeahead-on-select 를 추가하기 만하면 됩니다.

다음은 컨트롤러 내부로 이동합니다.

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

$ item 안에는 제안 목록의 메인 배열에서 전달한 전체 객체를 얻을 수 있습니다.

답변

유효성 검사 전에 다음을 시도하십시오.

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