कोणीय चल इनपुट लेबल Typeahead

Question

मैं यहाँ से शैली में से एक का इस्तेमाल किया है उपयोग करने के लिए: http://tympanus.net/Development/TextInputEffects/index.html

एक इनपुट निर्देश बनाने के लिए कृपया plunker देखें: https://plnkr.co/edit/wELJGgUUoiykcp402u1G?p=preview

यह मानक इनपुट फ़ील्ड के लिए महान काम कर रहे, हालांकि, मैं विर्थ ट्विटर टाइपहेड काम करने के लिए संघर्ष कर रहा हूं: https://github.com/twitter/typeahead.js/

प्रश्न - मैं अपने फ़्लोटिंग इनपुट लेबल को टाइपहेड के साथ कैसे उपयोग कर सकता हूं?

app.directive('floatInput', function($compile) { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    scope: { 
     elemTitle: '=elemTitle', 
     elemtId: '=elemeId' 
    }, 
    templateUrl: 'input-template.html', 
    link: function(scope, elem, attrs) { 
     var ngModelName = elem.attr('input-model'); 
     var inputElem = angular.element(elem[0].querySelector('input')); 
     inputElem.attr('ng-model', ngModelName); 

     $compile(inputElem)(scope); 
     $compile(inputElem)(scope.$parent); 

     var inputLabel = angular.element(elem[0].querySelector('label span')); 
     inputLabel.attr('ng-class', '{\'annimate-input\' : '+ngModelName+'.length > 0}'); 
     $compile(inputLabel)(scope); 
    }, 
    controller: function($scope) { 
     $scope.title = $scope.elemTitle; 
     $scope.inputId = $scope.elemId 
    } 
    } 
}) 

HTML:

<div> 
<span class="input input--juro"> 
    <input class="input__field input__field--juro" type="text" id="{{inputId}}" ng-model="tmp" /> 
    <label class="input__label input__label--juro" for="{{inputId}}"> 
    <span class="input__label-content input__label-content--juro">{{title}}</span> 
    </label> 
    </span> 
</div> 

Answer 1

सबसे आसान तरीका मैं इस लक्ष्य को हासिल करने के लिए के बारे में पता निर्देश का link समारोह में Typeahead इनपुट प्रारंभ करने में है। उपलब्ध विकल्पों के साथ टाइपहेड शुरू करने के लिए मैं निर्देश के लिए एक वैकल्पिक पैरामीटर तैयार करूंगा और सूची प्रदान किए जाने पर इनपुट को टाइपहेड इनपुट के रूप में चुनिंदा रूप से प्रारंभ कर दूंगा।

यहाँ निर्देश बजाय कैसा नज़र आ सकता एक उदाहरण है:

app.directive('floatInput', function($compile) { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    scope: { 
     elemTitle: '=elemTitle', 
     elemtId: '=elemeId', 
     typeaheadSrc: '=?typeaheadSrc' 
    }, 
    templateUrl: 'input-template.html', 
    link: function(scope, elem, attrs) { 
     var inputElem = angular.element(elem[0].querySelector('input')); 

     if(scope.typeaheadSrc && scope.typeaheadSrc.length > 0){ 
     var typeahead = jQuery(inputElem).typeahead({ 
      hint: true, 
      highlight: true, 
      minLength: 1 
     }, { 
      name: 'typeahead', 
      source: substringMatcher(scope.typeaheadSrc) 
     }); 
     } 
    }, 
    controller: function($scope) { 
     $scope.title = $scope.elemTitle; 
     $scope.inputId = $scope.elemId 
    } 
    } 
}); 
// from http://twitter.github.io/typeahead.js/examples/ 
var substringMatcher = function(strs) { 
    return function findMatches(q, cb) { 
    var matches= [], 
     substrRegex = new RegExp(q, 'i'); 

    $.each(strs, function(i, str) { 
     if (substrRegex.test(str)) { 
     matches.push({value: str}); 
     } 
    }); 

    cb(matches); 
    }; 
}; 

मैं वांछित परिणाम प्राप्त करने के लिए अपने plunker अद्यतन किया है: Plunker