2017-12-25 9 views
5

को अनुमति दें a sample angular directive to prevent typing non-numeric keys (StackOverflow answer) है। मैं कई इनपुट में इशारा निर्देश का उपयोग करने के लिए this fiddle जैसे कुछ लिखना चाहता हूं। कृपया ध्यान दें कि मेरे इनपुट में मेरे पास विभिन्न अलग-अलग निर्देश हैं, इसलिए मैं ऊपर दिए गए उत्तर के अपडेट में सुझाए गए अनुसार उसी टेम्पलेट का उपयोग नहीं कर सकता।कोणीय निर्देश: केवल

var $scope; 
var app = angular.module('myapp', []); 

app.controller('Ctrl', function($scope) { 
    $scope.myNnumber1 = 1; 
    $scope.myNnumber2 = 1; 
}); 

app.directive('isNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element) { 
      scope.$watch(element.ngModel, function(newValue,oldValue) { 
       newValue = String(newValue); 
       newValue = newValue.replace('۰', '0').replace('۱', '1').replace('۲', '2').replace('۳', '3').replace('۴', '4').replace('۵', '5').replace('۶', '6').replace('۷', '7').replace('۸', '8').replace('۹', '9'); 
       var arr = String(newValue).split(""); 
       if (arr.length === 0) return; 
       if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return; 
       if (arr.length === 2 && newValue === '-.') return; 
       if (isNaN(newValue)) { 
        element.ngModel = oldValue; 
       } 
      }); 
     } 
    }; 

अद्यतन: कृपया विचार है कि मैं कुछ प्रक्रियाओं करने के लिए गैर अंग्रेजी संख्या और इतने पर बदलना होगा। मैंने Angular_10 के उत्तर के आधार पर a new fiddle here बनाया है। अब, फारसी संख्या टाइप करते समय कर्सर की स्थिति को छोड़कर हर चीज ठीक है। जब मैं एक फारसी संख्या टाइप करता हूं, तो इसे अंग्रेजी समकक्ष संख्या के साथ बदल दिया जाता है, लेकिन कर्सर अचानक अंत तक कूद जाता है।

+0

विस्तार से अपने प्रश्न आप क्या हासिल करना चाहते हैं और आप क्या कोशिश की है कृपया विस्तार से बताएं। –

+0

@ Angular_10 [जेएस और एचटीएमएल] (http://jsfiddle.net/AMShafiee/u1w9v2m7/) कोड जो मैंने गैर संख्यात्मक कुंजी दर्ज करने से रोकने के लिए निर्देश का उपयोग करके लिखा है, काम नहीं करता है। कृपया [fiddle] (http://jsfiddle.net/AMShafiee/u1w9v2m7/) जांचें और मुझे बताएं कि मैं इसे कैसे ठीक कर सकता हूं। – Ahmad

उत्तर

6

ठीक है! आपकी आवश्यकता को देखते हुए मैंने स्वतंत्रता ली और अधिक अनुकूलित निर्देश लिखा।

यहाँ एक ही

समस्या

उदाहरण है जिसमें से आप के लिए भेजा और समस्या पैदा कर दिया निर्देश में परिवर्तन किए के लिए fiddle है।

  1. आपका $ गुंजाइश चर नाम HTML/JS में गलत हैं (; $ scope.myNnumber2 = 1; $ scope.myNnumber1 = 1 जे एस में और HTML में यह किया गया था एनजी मॉडल = "myNumber1")
  2. आप element ng-model तक पहुंच रहे हैं और इसे निर्देश के माध्यम से संशोधित करने का प्रयास कर रहे हैं जो खराब अभ्यास है और निर्देश के लिए मूल कारण भी नहीं है। जैसा कि आप ng-model मान नहीं बदल रहे हैं, लेकिन बदले में HTML तत्व मान को संशोधित कर रहे हैं जो कोणीय पहचान नहीं पाएगा।
  3. निर्देश में $watch का उपयोग करने पर अधिक प्रदर्शन प्रदर्शन के लिए हमेशा बेहतर नहीं होता है।

समाधान

app.directive('isNumber', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function(scope, element, attr, ctrl) { 
      function inputValue(val) { 
       if (val) { 
        var numeric = val.replace(/[^- 0-9]/g, ''); 

        if (numeric !== val) { 
         ctrl.$setViewValue(numeric); 
         ctrl.$render(); 
        } 
        return numeric; 
       } 
       return undefined; 
      } 
      ctrl.$parsers.push(inputValue); 
     } 
    }; 

}); 

नियंत्रक संचार के निर्देश की आवश्यकता नहीं है जब हम कड़ी function.From में 4 परम कि Ctrl परम हम नियंत्रक दायरे से/दृश्य बातें संशोधित कर सकते हैं के रूप में नियंत्रक पारित कर सकते हैं।

कुछ मूल रेगेक्स अभिव्यक्ति का उपयोग करके यह पता लगाने के लिए कि इनपुट इनपुट क्या है और इसे नियंत्रक स्कोप ऑब्जेक्ट व्यू मान में सेट करें।

ctrl.$setViewValue(numeric); //to set the value in the respective ngModdel 
ctrl.$render(); //to display the changed value 

अधिक के बारे में $setViewValue

+0

कृपया अद्यतन जांचें और विचार करें कि मुझे गैर अंग्रेजी संख्याओं को बदलने के लिए कुछ प्रक्रियाएं करने की आवश्यकता है। मैं इन गैर अंग्रेजी संख्याओं को अंग्रेजी में कैसे बदल सकता हूं? (मैंने अपना मूल पहेली भी अपडेट किया है।) – Ahmad

+1

गैर अंग्रेजी संख्याएं क्या हैं?यदि आप कुछ गैर-अंग्रेज़ी कीबोर्ड मानों में प्रवेश करने वाले उपयोगकर्ता का जिक्र कर रहे हैं तो आपको सामान्य संख्या –

+0

पर इस तरह के रूपांतरण करने के लिए कुछ बाहरी पुस्तकालयों का उपयोग करने पर विचार करना चाहिए, क्या आपको लगता है कि कृपया अपडेट देखें? – Ahmad

संबंधित मुद्दे