ประเภท ui-bootstrap เชิงมุมเรียกกลับบน selectMatch?

ฉันใช้หัวพิมพ์ ui-bootstrap เชิงมุมและฉันต้องการใช้เป็นวิธีเลือกตัวเลือกมากมายดังนั้นฉันต้องได้รับค่าที่เลือกเมื่อเปิดใช้เมธอด 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)"/>

ดูข้อมูลจำเพาะของ typeaheadสำหรับข้อมูลเพิ่มเติม (ค้นหา 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 callback เหมือนที่อธิบายไว้ในคำตอบด้านบนนี้

ฉันพบวิธีการทำสิ่งที่ฉันต้องการ ฉันเห็นว่ามีแอตทริบิวต์ typeahead-editable และหากตั้งค่าเป็น false ค่าที่เลือกจะเปลี่ยนเฉพาะเมื่อเลือกค่าจากโมเดล ดังนั้นนาฬิกา $ จึงทำงานได้ดีเพื่อตรวจสอบเมื่อมีการเลือกค่าใหม่

<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);