केवल कोणीय और jqlite

का उपयोग कर टैब के रूप में एंटर कुंजी का उपयोग करके मैंने कई धागे देखे हैं और कई प्रकार के समाधानों की कोशिश की है। काफी स्पष्ट रूप से मुझे लगता है कि मैं अपना दिमाग खो रहा हूं।केवल कोणीय और jqlite

मेरे पास इनपुट के साथ एक एनजी-दोहराना है। ऐसा करने की ज़रूरत है कि जब उपयोगकर्ता एंटर दबाता है, तो उसे टैब को मुख्य इनपुट में अनुकरण करना चाहिए, मूल रूप से टैब कुंजी कार्यक्षमता अनुकरण करना चाहिए।

कोड (अधूरा): HTML:

<body ng-app="ap" ng-controller="con"> 
<table> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
    </tr> 
    <tr ng-repeat='person in persons'> 
     <td> 
      <input type='text' 
       name="personName" 
       ng-model="person.name" 
      /> 
     </td> 
     <td> 
      <input type='number' 
       name="personName" 
       ng-model="person.age" 
       enter-as-tab 
      /> 
     </td> 
    </tr> 
</table>

जे एस:

var app = angular.module("ap", []); 

app.controller("con", function ($scope) { 

    $scope.persons = [ 
     { name: 'Susan', age: 1 }, 
     { name: 'Peter', age: 1 }, 
     { name: 'Jack', age: 2 } 
    ]; 
}); 

app.directive('enterAsTab', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       event.preventDefault(); 
       // Go to next age input       
      } 
     }); 
    }; 
});

यहाँ बेला के लिए एक लिंक है: fiddle

स्रोत

2014-10-09 avn

क्या समाधान आप पहले से ही की कोशिश की? – AlexFoxGill

मैंने कोड को कोड से हटा दिया, इसलिए मेरे पास अब उनका कोई संदर्भ नहीं है, लेकिन यह मूल रूप से मैं प्राप्त करने की कोशिश कर रहा हूं: [link] (http://stackoverflow.com/questions/23430830/keyboard -navigation-इन-AngularJS-टेबल) – avn

ठीक है, तो मैं पता लगा लिया। सब के बाद यह मुश्किल नहीं था। पूरी तरह से पकड़ा गया "कोणीय" मानसिकता का उपयोग करते समय jQuery को मत सोचो। enter-as-tab

स्रोत

2014-10-10 09:34:45 avn

@ AVN के समाधान से शुरू मैं कुछ परिवर्तन रिकर्सिवली खोजने के लिए और अगले करने के लिए ध्यान केंद्रित करने के लिए बनाया:

app.directive('enterAsTab', function() { 
    return function (scope, element, attrs) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 13) { 
       event.preventDefault(); 
       var elementToFocus = element.next('tr').find('input')[1]; 
       if(angular.isDefined(elementToFocus)) 
        elementToFocus.focus(); 
      } 
     }); 
    }; 
});

यहाँ काम कर रहे बेला के लिए लिंक है:

यहाँ निर्देश है कि मैं लागू किया है इनपुट टेक्स्ट या इनपुट नंबर, लेकिन केवल तभी जब मान मान्य है, या फॉर्म भेजें। ionic रूपों के लिए डिजाइन किया गया था, लेकिन किसी भी कोणीय रूपों के लिए अनुकूलित किया जा सकता:

app.directive('enterAsTab', function() { 
    return { 
    restrict: 'A', 
    require: '^ngModel', 
    link: function (scope, element, attrs, ctrl) { 
     element.bind("keydown keypress", function (event) { 

     function isKeyEnterAndValid(){ 
      return event.which === 13 && ctrl.$valid; 
     } 

     function nextItem(div, tag){ 
      var next = div.next(tag); 
      if (!next) return nextItem(div, 'label'); 
      return next; 
     } 

     function isTypeTextOrNumber(input){ 
      return ['text', 'number'].indexOf(input.attr('type')) === -1; 
     } 

     function findInput(div){ 
      var next = nextItem(div, 'div'); 
      if (!next) return; 
      var input = next.find('input'); 
      if (!input || isTypeTextOrNumber(input)){ 
      return findInput(next); 
      } 
      return input[0]; 
     } 

     if(isKeyEnterAndValid()) { 
      var nextInput = findInput(element.parent()); 
      if(angular.isDefined(nextInput)){ 
      event.preventDefault(); 
      nextInput.focus(); 
      } 
     } 

     }); 
    } 
    }; 
});

स्रोत

2016-09-27 00:38:05 manzapanza

केवल कोणीय और jqlite

उत्तर

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