AngularJS में एक महत्वपूर्ण घटना पर इनपुट करने के लिए ध्यान देने के बदले

टेस्ट मामला: http://jsbin.com/ahugeg/4/edit (थोड़ा लंबा)AngularJS में एक महत्वपूर्ण घटना पर इनपुट करने के लिए ध्यान देने के बदले

ऊपर परीक्षण मामले में, मैं तीन इनपुट तत्वों, ng-repeat निर्देश के द्वारा उत्पन्न की है। इस परीक्षण मामले में मेरा इरादा यह है कि इन इनपुटों में से किसी एक में ऊपर/नीचे तीरों को मारने से उस दिशा में इनपुट उपलब्ध होने पर इनपुट को ध्यान में रखना चाहिए।

मैं अंगुलरजेएस के लिए नया हूं, इसलिए मैं ऐसा करने के लिए कुछ सरल तरीके से गायब हो सकता हूं। वैसे भी, मैंने ऊपर और नीचे की घटनाओं को संभालने के लिए दो नए निर्देश (on-up और on-down) परिभाषित किए हैं और $scope.focusNext और $scope.focusPrev विधियों को सही प्रविष्टि पास करने के लिए बुला रहे हैं, जिसके संबंध में ध्यान केंद्रित करना चाहिए। यह वह जगह है जहां मैं फंस गया हूँ।

मैं इसे कोणीय तरह नियंत्रकों में डोम तत्वों से निपटने के लिए नहीं है, लेकिन मैं नहीं देख सकते हैं कि फोकस एक मॉडल की एक विशेषता/संपत्ति के रूप में देखा जा सकता है। मैंने एक अलग $scope.focusedEntry होने का भी सोचा था, लेकिन फिर मुझे उस संपत्ति पर परिवर्तन के लिए देखना चाहिए? यहां तक कि यदि मैं करता हूं और मैं परिवर्तनों का पता लगाता हूं, तो मैं उस प्रविष्टि से संबंधित इनपुट तत्व तक कैसे पहुंच सकता हूं जिसे मैं केंद्रित करना चाहता हूं?

यह कैसे किया जाना चाहिए इस पर कोई मदद बहुत सराहना की जाती है।

स्रोत

2013-02-08 Shrikant Sharat

मैं सिर्फ यह लिखा है और यह कुछ समय के लिए परीक्षण किया है - यह आप क्या चाहते हैं करता है सभी अतिरिक्त मनमुताबिक अपने नियंत्रक और एचटीएमएल में। इसे here पर काम करना देखें।

HTML:

<body ng-controller="Ctrl"> 
    <input ng-repeat="entry in entries" value="{{entry}}" key-focus /> 
</body>

नियंत्रक:

function Ctrl($scope) { 
    $scope.entries = [ 'apple', 'ball', 'cow' ]; 
}

निर्देशक:

app.directive('keyFocus', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, elem, attrs) { 
     elem.bind('keyup', function (e) { 
     // up arrow 
     if (e.keyCode == 38) { 
      if(!scope.$first) { 
      elem[0].previousElementSibling.focus(); 
      } 
     } 
     // down arrow 
     else if (e.keyCode == 40) { 
      if(!scope.$last) { 
      elem[0].nextElementSibling.focus(); 
      } 
     } 
     }); 
    } 
    }; 
});

स्रोत

2013-02-09 00:35:55

धन्यवाद।आपके समाधान ने मुझे अपने काम पर विचार और प्रेरणा दी। मैंने थोड़ा अलग दृष्टिकोण लिया, 'एनजी-दोहराने वाले तत्व' के माता-पिता पर निर्देश परिभाषित किया, जो 'इनपुट' का चयनकर्ता लेता है जिस पर ध्यान केंद्रित किया जाना है। मैं एक मिनट में अपना समाधान पोस्ट करूंगा। एक बार फिर धन्यवाद। –

मुझे एक ही समस्या थी और इस सरल निर्देश का उपयोग किया। यह एनजी शो और एनजी-हाइड would- केवल ध्यान देने के साथ रूप में काम करता है, अगर यह विशेषता के रूप में सच का समाधान करता है:

.directive('focusOn',function() { 
    return { 
     restrict : 'A', 
     link : function($scope,$element,$attr) { 
      $scope.$watch($attr.focusOn,function(focusVal) { 
       if(focusVal === true) { 
        setTimeout(function() { 
         $element.focus(); 
        },50); 
       } 
      }); 
     } 
    } 
})

स्रोत

2013-02-08 23:49:01 koolunix

हां! अच्छा और सरल समाधान। बहुत बहुत धन्यवाद। –

ग्रेट समाधान। आपको फोकस की जांच करने की आवश्यकता है और अधिक अच्छी तरह से। एनजी-शो और एनजी-छिपाने के लिए उपयोग करें बूलियन (मूल्य) जो दुर्भाग्य से एक निजी कोणीय कार्य है। मैंने इसे एक सेवा में स्थानांतरित कर दिया और बुलीयन.टोबोलियन (फोकसवेल) === सच कहा। – shapeshifter

@ ट्रेवर के समाधान से प्रेरित होकर, यहाँ क्या मैं पर बसे है,

app.directive('focusIter', function() { 

    return function (scope, elem, attrs) { 
     var atomSelector = attrs.focusIter; 

     elem.on('keyup', atomSelector, function (e) { 
      var atoms = elem.find(atomSelector), 
       toAtom = null; 

      for (var i = atoms.length - 1; i >= 0; i--) { 
       if (atoms[i] === e.target) { 
        if (e.keyCode === 38) { 
         toAtom = atoms[i - 1]; 
        } else if (e.keyCode === 40) { 
         toAtom = atoms[i + 1]; 
        } 
        break; 
       } 
      } 

      if (toAtom) toAtom.focus(); 

     }); 

     elem.on('keydown', atomSelector, function (e) { 
      if (e.keyCode === 38 || e.keyCode === 40) 
       e.preventDefault(); 
     }); 

    }; 
});

यह सभी बार-बार इनपुट के मूल तत्व पर सेट करने के लिए focus-iter विशेषता को परिभाषित करता है। इसे यहां कार्रवाई में देखें: http://jsbin.com/ahugeg/10/।

@ ट्रेवर के ऊपर लाभ यह है कि मैं focus-iter विशेषता के मान के लिए मनमाने ढंग से चयनकर्ता सेट कर सकता हूं ताकि यह निर्दिष्ट किया जा सके कि फोकस कूदने के कौन से तत्वों के साथ काम करना चाहिए। एक पागल उदाहरण के रूप में, विशेषता input:even पर सेट करने का प्रयास करें :)। यह मेरे आवेदन के बाद से मदद करता है, input एस परीक्षण के विपरीत, उनके चारों ओर अतिरिक्त मार्कअप के साथ आते हैं।

स्रोत

2013-02-09 05:45:57

यह वास्तव में बहुत साफ है जो आपने वहां किया था। मुझे लगता है कि मूल रूप से कुछ भी कैसे काम करता है जैसे 'फोकस-इटर = "फॉर्म> *" '। –

धन्यवाद। या यहां तक कि 'फोकस-इटर = "[कुंजी-फोकस]"', जब इनपुट में आपके उत्तर में मार्कअप की तरह 'कुंजी-फोकस' विशेषता होती है :) –

टेबल सेल के अंदर इनपुट के साथ मेरी मदद कर सकता है? –

AngularJS में एक महत्वपूर्ण घटना पर इनपुट करने के लिए ध्यान देने के बदले

उत्तर

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