कोणीय जेएस इनपुट बॉक्स टाइपिंग और रोके

Question

कोणीय जेएस के लिए नया और कोणीय जेएस के साथ xmpp सेवा का उपयोग कर, मेरे पास एक ऐसी स्थिति है जहां मुझे टाइपिंग भेजने की आवश्यकता होती है जब उपयोगकर्ता इनपुट बॉक्स में टाइप करना शुरू करता है और जब उपयोगकर्ता टाइपिंग बंद कर देता है तो रोकें।

मैं मूल विचार है कि मैं $ टाइमआउट उपयोग करने के लिए, और एक चर की तरह vm.isTyping = false;

मैं भी उसी के लिए मंच के कुछ प्रकार लिखा है है की जरूरत है।

<input type="text" placeHolder="Type a message here" 
    ng-model="vm.newMessage" 
    ng-blur="focusRemove(vm.newMessage,vm.contact)" 
    ng-change="vm.checkTyping()" 
    ng-model-options="{'debounce': 500}" 
    ng-keydown="vm.onKeyDown($event)" auto-focus /> 

समस्या मैं का सामना करना पड़ रहा है कि मैं टाइपिंग हर उपयोगकर्ता किसी भी कुंजी प्रेस जब नहीं भेज सकते है, एक टाइपिंग पहली कुंजी दबाने पर भेज दिया जाता है तो मैं चाहिए:

vm.isTyping = false; 
vm.checkTyping = function(){ 
    $timeout(function() { 
     vm.isTyping = true; 
    },2000); 

    if(!vm.isTyping){ 
     vm.sendTyping(); 
    } else{ 
     // 
    } 
}; 

इस इनपुट क्षेत्र कोड है जब उपयोगकर्ता टाइपिंग रोकता है तो रोकें।

क्या कोई भी इसे प्राप्त करने के लिए कोणीय जेएस में कोड को लागू करने में मेरी सहायता कर सकता है।

Answer 1

आप क्या कर सकते हैं ng-keyup विशेषता input टैग में शामिल है। तो जब उपयोगकर्ता टाइपिंग शुरू करता है तो आप ध्वज vm.isTyping = true सेट करते हैं। जब उपयोगकर्ता टाइपिंग बंद कर देता है तो timeout आपके ng-keyup हैंडलर में है, जो एक निश्चित अवधि के बाद vm.isTyping = false सेट करेगा। देखें नीचे दिए गए कोड snipet

function myappCtrl($scope, $timeout) { 
 
    var timoutPromise = null; 
 
\t \t $scope.newMessage = ""; 
 
    $scope.isTyping = false; 
 
    
 
    $scope.checkTyping = function() { 
 
    \t $scope.isTyping = true; 
 
     if(timoutPromise) { 
 
      $timeout.cancel(timoutPromise); 
 
     } 
 
    } 
 
    
 
    $scope.stoppedTyping = function() { 
 
    \t timoutPromise = $timeout(function() { 
 
     $scope.isTyping = false; 
 
     }, 2000) 
 
    \t 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
<div ng-controller="myappCtrl"> 
 
    <input type="text" placeHolder="Type a message here" ng-model="newMessage" ng-change="checkTyping()" ng-keyup="stoppedTyping()"/> 
 
    <div ng-if="isTyping"> 
 
    typing 
 
    </div> 
 
</div> 
 
</div>