AngularJS和離子移動到下一個表單輸入

我做問答遊戲和IM使用NG重來生成取決於答案箱（見截圖） AngularJS和離子移動到下一個表單輸入

這是產生11 HTML盒子：

<form> 
<span ng-repeat="content in answerArr track by $index"><span style="margin-right:10px;"></span><!--this adds space --> 

<span class="single-input" ng-repeat="contentt in content track by $index"> 
      <span ng-if="$index < content.length"> 
       <span class="box" style="display:inline-block;"> 
        <input type="text" class="yo" focus maxlength="1"> 
       </span> 
      </span> 

</span> 
</span> 
</form>

我試圖使是當你鍵入一個字母，它會進入下一個輸入框。我已經加入了「焦點」指令，並創造了它這樣的：

.directive('focus', function() { 
    return { 
    restrict: 'A', 
    link: function($scope,elem,attrs) { 

    elem.bind('keydown', function (e) { 
     console.log("test"); 
     var nextElement = elem.closest('.single-input').next(); 
     if(nextElement.length) nextElement.find('input').focus(); 
    }); 
    } 
    } 
})

沒有做任何事情，不知道是什麼問題 - 誰能幫助？

感謝

來源

2016-09-24 Gaz Smith

這可能是因爲'elem'是具有「焦點」的元素rective，這是你的''。由於輸入後面沒有相鄰的兄弟，'elem.next（）'不會指向任何有效的元素。但是在'undefined'上調用'focus'實際上應該拋出一個錯誤，而不是「不做任何事情」，所以我不確定這是否真的在這裏發生了什麼...... –

我編輯了這個問題，我把一個類在輸入我嘗試了一切，但我無法得到它的工作，雖然它的權利，雖然它打破了「var nextElement」，但即使嘗試趕上它不會告訴我爲什麼 –

，我可以看到你的HTML結構，它不似乎是另外input是未來span。您需要先向上遍歷ng-repeat元素，然後再次搜索輸入以觸發焦點。這樣只有你可以做這件事。

對於我建議你到一些類添加到ng-repeatspan像single-number

標記

<span class="single-input" ng-repeat="contentt in content track by $index">

指令

.directive('focus', function() { 
    return { 
    restrict: 'A', 
    link: function($scope,elem,attrs) { 

    elem.bind('keydown', function (e) { 
     var nextElement = elem.closest('.single-input').next(); 
     if(nextElement.length) nextElement.find('input'). trigger('focus'); 
    }); 
    } 
    } 
})

來源

2016-09-24 22:16:08

感謝您的回答，我明白你的意思，但仍然doesn沒有工作，也沒有錯誤拋出:( –

@pandemic我已經申請了'單輸入'來糾正'ng-repeat'，目前我加入了內部的重複..應該是什麼？ –

應該是類似var nextElement = elem.closest（'。single-input span span span input'）。next（）; –

AngularJS和離子移動到下一個表單輸入

回答

相關問題