कोणीय

Question

के साथ बूटस्ट्रैप टाइपहेड का उपयोग कर मैं वर्तमान में एक वेब अनुप्रयोग विकसित कर रहा हूं जो ट्विटर-बूटस्ट्रैप और एंगुलरजेज़ को अच्छी सद्भाव में उपयोग करता है। हालांकि, मुझे टाइपहेड के साथ समस्याएं हैं और इसे एनजी-मॉडल के रूप में उपयोग करना है।

टाइपिंग करते समय सब कुछ ठीक काम करता है, लेकिन जब मैं कोई आइटम (एक सुझाव) चुनता हूं, तो मूल्य कोणीय नियंत्रक में प्रतिबिंबित नहीं होता है जब तक कि कोई मान चयनित नहीं होने के बाद मैं टेक्स्टबॉक्स का मान बदलता हूं। टाइप करें -> चुनें -> काम टाइप करें। टाइप करें -> चयन काम नहीं करता है।

HTML:

<form ng-submit="addAssignment(assignName)"> 
    <div class="input-append"> 
    <input type="text" placeholder="Type a name" ng-model="assignName" ng-change="dostuff()" data-provide="typeahead" data-source="{{ teamNames }}"> 
    <button class="btn" type="submit">Add</button> 
</div> 
</form> 

कोणीय कोड:

$scope.addAssignment = function(name) { 
    alert(name); 
    return; 
} 

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

मैं इस समस्या को हल करने में मदद कर सकता हूं कि किसी भी प्रतिक्रिया की सराहना करता हूं। धन्यवाद!

Answer 1

कि AngularJS v1.2 +

• डेमो से ngAnimate का लाभ उठाता है Bootstrap3 के लिए एक काम कर देशी कार्यान्वयन AngularStrap में नहीं है: http://mgcrea.github.io/angular-strap/##typeaheads

तुम भी चेकआउट कर सकते हैं:

• स्रोत: https://github.com/mgcrea/angular-strap/blob/master/src/typeahead/typeahead.js
• Plunkr: http://plnkr.co/edit/VB43wxoDBhVyRMnKUHr9?p=preview

Answer 2

ठीक है, मैंने एक गंदा कामकाज बनाया है। उदाहरण के यहाँ स्थित के आधार पर: https://groups.google.com/forum/#!topic/angular/FqIqrs-IR0w/discussion, मैं Typeahead नियंत्रण के लिए एक नया मॉड्यूल बनाया है:

angular.module('storageApp', []).directive('typeahead', function() { 
return { 
    restrict:'E', 
    replace:true, 
    scope:{ 
     model:'=', 
     source:'&' 
    }, 
    template:'<input type="text" ng-model="model"/>', 
    link:function (scope, element, attrs) { 
     console.log(scope.source); 
     $(element).typeahead({ 
      source:scope.source, 
      updater:function (item) { 
       scope.$apply(read(item)); 
       return item; 
      } 
     }); 

     function read(value) { 
      scope.model = value; 
     } 
    } // end link function 
}; // end return 
}); // end angular function 

मैं डेटा बाइंडिंग के साथ कुछ मुद्दों, स्वत: भरण विकल्प एक कोणीय नियंत्रण से इकट्ठा कर रहे हैं के लिए किया था, और मैं था इस जानकारी को तैयार करने से पहले नियंत्रण बनाया गया था। इसलिए, मैंने टाइपहेड कंट्रोल में एक एचटीएमएल-एट्रिब्यूट (डेटासोर्स) जोड़ा, और कन्स्ट्रक्टर में एक $ निरीक्षण समारोह स्थापित किया।

<typeahead id="addSupplier" model="addSupplier" placeholder="Skriv inn leverandør" class="typeahead" source="getSuppliers()" ></typeahead> 

मुझे लगता है कि यह एक गंदा समाधान है, इसलिए यदि किसी के पास कोई बेहतर विचार है, तो मुझे यह सुनने में आपका स्वागत है :)। बग का वर्णन यहां किया गया है: https://github.com/angular/angular.js/issues/1284

Answer 3

यहां एक और तरीका है जिसका मैंने उपयोग किया है। यह भी गंदे है। यह कोड आपके नियंत्रक में छोड़ा जा सकता है।

$('#id_of_your_typeahead_input').change(function(event){ 
    $scope.$apply(function(scope){ 
    scope.your_ng_model = event.target.value; 
    }); 
    $scope.your_ng_click_function(); 
}); 

Answer 4

यह @ zgohr के कार्यान्वयन पर आधारित है

$('#your-input-id-here').change((event)-> 
    angular.element("#your-input-id-here").scope().$apply((scope)-> 
    scope.your_ng_model = event.target.value 
) 
) 

Answer 5

मैं AngularUI/बूटस्ट्रैप रिपोजिटरी से Typeahead निर्देश बाहर की जाँच का सुझाव देते हैं: http://angular-ui.github.com/bootstrap/

यह निवासी है शुद्ध AngularJS में कार्यान्वयन इसलिए इसे किसी भी तृतीय पक्ष निर्भरताओं की आवश्यकता नहीं है।इसके शीर्ष पर यह एंगुलरजेएस पारिस्थितिक तंत्र के साथ बहुत अच्छी तरह से एकीकृत है: * select निर्देश * से ज्ञात संक्षिप्त वाक्यविन्यास का उपयोग करता है * एंगुलरजेएस वादे को समझता है ताकि परिणाम कम से कम प्रयास के साथ $http का उपयोग करके गतिशील रूप से लाया जा सके।

Answer 6

एक अन्य विकल्प

एचटीएमएल

<form ng-submit="submitRegion()"> 
     <input type="text" ng-model="currentRegion" id="region-typeahead" data-source="{{ defaultRegions }}" data-provide="typeahead"/> 
     <button type="submit" class="btn">Add</button> 
    </form> 

में अपने नियंत्रक में

$scope.defaultRegions = ["Afghanistan", "Australia", "Bahrain", "New Zealand" ]; 

    $scope.submitRegion = function(){ 
     $scope.currentRegion = $('#region-typeahead').val(); 
     $scope.addRegion(); //your add or click function you defined 
     $scope.currentRegion = ''; //clear 
    } 

Answer 7

मैं इस देशी Typeahead कार्यान्वयन कोणीय (स्टाइल के लिए और बूटस्ट्रैप सीएसएस) पर केवल निर्भर बना दिया है, मदद कर सकता है कोई भी यह कैसे करना चाहता है। यहाँ

डेमो: https://jsfiddle.net/bh29tesc/

कोणीय निर्देश:

angular.module('app'). 
directive('typeahead', ['$compile', '$timeout', function($compile, $timeout) { 
    return { 
     restrict: 'A', 
     transclude: true, 
     scope: { 
      ngModel: '=', 
      typeahead: '=', 
      typeaheadCallback: "=" 
     }, 
     link: function(scope, elem, attrs) { 
      var template = '<div class="dropdown"><ul class="dropdown-menu" style="display:block;" ng-hide="!ngModel.length || !filitered.length || selected"><li ng-repeat="item in filitered = (typeahead | filter:{name:ngModel} | limitTo:5) track by $index" ng-click="click(item)" style="cursor:pointer" ng-class="{active:$index==active}" ng-mouseenter="mouseenter($index)"><a>{{item.name}}</a></li></ul></div>' 

      elem.bind('blur', function() { 
       $timeout(function() { 
        scope.selected = true 
       }, 100) 
      }) 

      elem.bind("keydown", function($event) { 
       if($event.keyCode == 38 && scope.active > 0) { // arrow up 
        scope.active-- 
        scope.$digest() 
       } else if($event.keyCode == 40 && scope.active < scope.filitered.length - 1) { // arrow down 
        scope.active++ 
        scope.$digest() 
       } else if($event.keyCode == 13) { // enter 
        scope.$apply(function() { 
         scope.click(scope.filitered[scope.active]) 
        }) 
       } 
      }) 

      scope.click = function(item) { 
       scope.ngModel = item.name 
       scope.selected = item 
       if(scope.typeaheadCallback) { 
        scope.typeaheadCallback(item) 
       } 
       elem[0].blur() 
      } 

      scope.mouseenter = function($index) { 
       scope.active = $index 
      } 

      scope.$watch('ngModel', function(input) { 
       if(scope.selected && scope.selected.name == input) { 
        return 
       } 

       scope.active = 0 
       scope.selected = false 

       // if we have an exact match and there is only one item in the list, automatically select it 
       if(input && scope.filitered.length == 1 && scope.filitered[0].name.toLowerCase() == input.toLowerCase()) { 
        scope.click(scope.filitered[0]) 
       } 
      }) 

      elem.after($compile(template)(scope)) 
     } 
    } 
}]); 

उपयोग:

<input class="form-control" type="text" autocomplete="false" ng-model="input" placeholder="Start typing a country" typeahead="countries" typeahead-callback="callback" />