Girme anahtarını yalnızca angularjs ve jqlite

kullanarak sekme olarak kullanma Birden fazla iş parçacığına baktım ve çok çeşitli çözümler denedim. Açıkçası bence aklımı kaybediyorum.Girme anahtarını yalnızca angularjs ve jqlite

Girişlerle birlikte bir ng-yinelem var. Gerçekleştirilmesi gereken tek şey, kullanıcı girdiğinde, temel olarak sekme tuşu işlevselliğini simüle eden odağı bir sonraki girdiye kaydırmalıdır. (Tamamlanmamış)

kodu: 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>

JS: Burada

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       
      } 
     }); 
    }; 
});

keman bağlantısıdır: fiddle

kaynak

2014-10-09 avn

Zaten hangi çözümleri denediniz? – AlexFoxGill

Kodu kemandan kaldırdım, bu yüzden artık bunlara bir atıfta bulunmuyorum, ancak bu temelde elde etmeye çalıştığım şey: [link] (http://stackoverflow.com/questions/23430830/keyboard -gezinme-in-angularjs tablo) – avn

Ok, ben bunu anladım. Her şeyden sonra zor değildi. Sadece "Angular kullanırken jQuery düşünmeyin" zihniyet yakalandı. Ben bazı değişiklikler yinelemeli bulup yanındaki odaklanmak yapılan enter-as-tab

kaynak

2014-10-10 09:34:45 avn

@ AVN çözümüyle başlayarak: Burada

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(); 
      } 
     }); 
    }; 
});

çalışma keman için link: Burada

Ben uygulanan direktif olduğunu giriş metni veya giriş numarası, ancak yalnızca değer geçerliyse veya formu gönderin. ionic formları için tasarlanmış, ancak herhangi bir açısal form için uyarlanmış olabilir:

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(); 
      } 
     } 

     }); 
    } 
    }; 
});

kaynak

2016-09-27 00:38:05 manzapanza

Girme anahtarını yalnızca angularjs ve jqlite

cevap

İlgili konular