ボタンでテキストボックスにフォーカスを設定ng-repeatでクリック

このシナリオでは、ng-repeatにボタンがあり、ボタンでテキストボックスが有効になっています。テキストボックスが有効になっています。フォーカスもテキストの最後に設定されます。ボタンでテキストボックスにフォーカスを設定ng-repeatでクリック

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

 
app.controller('demoController', function($scope, $timeout) { 
 
    $scope.testFocus = [{'id': 0, 'isShow': false}, {'id': 1,'isShow': false}]; 
 
    
 
    $scope.buttonClicked = function(f, $index) { 
 
    
 
    angular.forEach($scope.testFocus, function(value, key) { 
 
     $scope.testFocus[key].isShow = (value.id == f.id ? true : false); 
 
     
 
    }); 
 
    $timeout(function() { 
 
     $('.input-'+ $index).focus(); 
 
    }); 
 
    
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="demoController"> 
 
    <div ng-repeat="f in testFocus"> 
 
     <button class="btn btn-sm chat-option chat-option-add" ng-click="buttonClicked(f, $index)" style="padding: 0px;border-radius: 50%;">button</button> 
 
     <input ng-if="f.isShow" value="hello" type="text" class="input-{{$index}}" style="color:black;" /> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2016-08-26 Jigarb1992

[要素の角度を設定する]の複製が可能です（http://stackoverflow.com/questions/25596399/set-element-focus-in-angular-way） – Cattla

ng-repeatの問題 – Jigarb1992

が更新されました私の答え:) – Cattla

ジェクト$タイムアウト

$timeout(function() { 
    $('.input-'+ $index).focus(); 
});

のjQueryを使用している場合は、テキストの末尾にフォーカスセットを試してみてください。コードの下に追加します。

$('.input-'+ $index).val($('.input-'+ $index).val())

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

 
app.controller('demoController', function($scope, $timeout) { 
 
    $scope.testFocus = [{'id': 0, 'isShow': false}, {'id': 1,'isShow': false}]; 
 
    
 
    $scope.buttonClicked = function(f, $index) { 
 
    
 
    angular.forEach($scope.testFocus, function(value, key) { 
 
     $scope.testFocus[key].isShow = (value.id == f.id ? true : false); 
 
     
 
    }); 
 
    $timeout(function() { 
 
     $('.input-'+ $index).focus(); 
 
     $('.input-'+ $index).val($('.input-'+ $index).val()); 
 
    }); 
 
    
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="demoController"> 
 
    <div ng-repeat="f in testFocus"> 
 
     <button class="btn btn-sm chat-option chat-option-add" ng-click="buttonClicked(f, $index)" style="padding: 0px;border-radius: 50%;">button</button> 
 
     <input ng-if="f.isShow" type="text" class="input-{{$index}}" style="color:black;" value="text" /> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2016-08-26 06:02:59 Cattla

@Cattlaからの答えは結構ですが、あなたはあなたの要素にフォーカスを設定するディレクティブを使用する必要があります：実際には、お使いのコントローラでDOM操作を行いますが悪いです。

このような何かが十分であろう：

.directive('autoFocus', ['$timeout', function($timeout) { 
    return { 
    restrict: 'A', 
    link : function($scope, $element) { 
     $timeout(function() { 
     $element[0].focus(); 
     }); 
    } 
    } 
}])

、これはあなたがそれを使用する方法である（オートフォーカス属性に注目してください）：

<input ng-if="f.isShow" auto-focus type="text" class="input-{{$index}}" style="color:black;"/>

注：この方法、あなたはありませんよ依存関係にjqueryを追加する必要があります（組み込みのjqliteとjavascriptを使用しています）。

出典

2016-08-26 06:14:46 Luxor001

最もクリーンなソリューションと再利用可能。 – gyc

私は質問を編集してください – Jigarb1992

ボタンでテキストボックスにフォーカスを設定ng-repeatでクリック

答えて

関連する問題