चयनकर्ता पर कोणीय यूआई-बूटस्ट्रैप टाइपहेड कॉलबैक?

Question

मैं कोणीय यूआई-बूटस्ट्रैप टाइपहेड का उपयोग कर रहा हूं और मैं इसे कई विकल्पों को चुनने के लिए एक तरीके के रूप में उपयोग करना चाहता हूं, इसलिए मुझे चयनित मूल्य प्राप्त करने की आवश्यकता होगी जब चयन विधि लॉन्च की जाती है, लेकिन मैं यह नहीं कर सकता कि कैसे करना है मेरे नियंत्रक में

<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) {... });

मुझे पता चला है कि मेथड सेलेक्टमैच वह है जिसे तब बुलाया जाता है जब उपयोगकर्ता प्रेस दर्ज करता है या सूची पर क्लिक करता है लेकिन मुझे नहीं पता कि उस पर कॉलबैक कैसे हो ...

धन्यवाद !

Answer 1

अब ऐसा करने का बेहतर तरीका है। एक नया कॉलबैक तरीका जोड़ा गया है

नियंत्रक फ़ाइल में निम्नलिखित जोड़ें:

 $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/

Comments

धन्यवाद! एक जादू की तरह काम किया। यह संभवतः टाइपरहेड

— ariestav

क्या किसी को इस बात का अंदाजा है कि वास्तव में उस कॉलबैक टाइप-हेड-ऑन-सिलेक्ट = 'ऑनसेल' ($ आइटम, $ मॉडल, $ लेबल) में $ आइटम $ मॉडल $ लेबल ऑब्जेक्ट क्या हैं? '

— आराध्वर्क

@Matt, वैसे भी हम onSelect घटना के साथ $ http का उपयोग करने में पोस्टबैक कर सकते हैं?

— प्रतिक गायकवाड़

@ AardVark71 $ आइटम $ मॉडल $ लेबल ये तीन गुण क्रमशः नीचे हैं। यदि आप एक से अधिक संपत्ति वाले ऑब्जेक्ट्स के JSON सरणी को बाइंड कर रहे हैं, तो आपको सभी गुणों के साथ $ आइटम में चयनित आइटम मिलेगा। $ मॉडल इनबिल्ट कोणीय मॉडल है जो चयनित आइटम को संग्रहीत करेगा। $ lable और $ lable आपको चयन के बाद पाठ बॉक्स में प्रदर्शित मूल्य देगा। तो बहुत कम समय में, $ लेबल $ मॉडल के बराबर होगा। आशा है कि यह आपके संदेह को स्पष्ट करता है।

— प्रतीक गायकवाड़

@ AardVark71 यह स्पष्ट करना आसान है कि क्या अभिव्यक्ति की तरह है state.id as state.name for state in states:। उस मामले $itemमें state, $ मॉडल है state.id, और $labelहैstate.name

— Aximili

Answer 2

संपादित करें: यह विधि अब सबसे अच्छी नहीं है। इस से ऊपर के उत्तर में बताए गए onSelect callback का उपयोग करना बेहतर है।

मैंने पाया कि मैं जो चाहता था वह कैसे करना है। मैंने देखा कि एक टाइप-हेड-संपादन योग्य विशेषता है और यदि यह गलत पर सेट है तो चयनित मूल्य केवल मॉडल से मूल्य का चयन करने पर बदल जाता है। और इसलिए जब एक नया मूल्य चुना जाता है, तो जाँच करने के लिए $ घड़ी ठीक काम कर रही है।

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

Answer 3

निम्नलिखित आपका 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
        };

$ आइटम के अंदर आपको वह सारी वस्तु मिल जाएगी जो आपने सुझाव सूची के मुख्य सरणी में दी है

Answer 4

सत्यापन से पहले निम्नलिखित प्रयास करें

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