角度JS - ダイナミックに作成されたテキストボックスに焦点を合わせる

私は1つのアイテムが編集可能なテーブルを持っています。その項目をクリックすると、テキストがテキストボックスに変わり、編集することができます。問題は、テキストをクリックするとテキストがテキストボックスに変わりますが、テキストボックスには集中できません。これは以下のコードを使用してコードを更新コード角度JS - ダイナミックに作成されたテキストボックスに焦点を合わせる

$scope.togglePrice = function (item) { 
    item.showUpdatePrice = true; 
}

HTML

<a ng-click="togglePrice(item)" ng-hide="item.showUpdatePrice" style="text-decoration:underline; cursor:pointer;">{{item.sellingPrice | currencyFormat}}</a> 

<input id="updatePriceId" ng-model="item.sellingPrice" class="form-control" ng-class="{'errorClass': showPriceError}" ng-show="item.showUpdatePrice" ng-blur="saveUpdatedPrice(item)" type="text" placeholder="Enter Price">

編集

<tbody ng-repeat="item in shoppingItems"> 
<tr> 
<td class="priceDiv"> 
<div> 
<a ng-click="togglePrice(item)" ng-hide="item.showUpdatePrice" style="text-decoration:underline; cursor:pointer;">{{item.sellingPrice | currencyFormat}}</a> 
<input ng-model="item.sellingPrice" auto-focus class="form-control" ng-class="{'errorClass': showPriceError}" ng-show="item.showUpdatePrice" ng-blur="saveUpdatedPrice(item)" type="text" placeholder="Enter Price"> 
</div> 
</td> 
</tr> 
</tbody>

出典

2017-02-22 I' m nidhin

あなたの方法を少し変更し、の指示書を追加して解決策を達成する必要があります。このソリューションで

$scope.togglePrice = function (item) { 
    item.showUpdatePrice = !item.showUpdatePrice; 

}

、text-boxesをクリックの上、それぞれのテキストボックスには焦点を当てますと、ぼかしや外部クリックの上、それは非集束なります。

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="myApp"> Click to focus on Below TextBoxes: <table ng-controller="myCtrl"> <tbody ng-repeat="item in shoppingItems"> <tr> <td class="priceDiv"> <div> <a ng-click="togglePrice(item)" ng-hide="item.showUpdatePrice" \t style="text-decoration:underline; cursor:pointer;">{{item.sellingPrice}}</a> <input ng-model="item.sellingPrice" auto-focus class="form-control" ng-class="{'errorClass': showPriceError}" ng-show="item.showUpdatePrice" ng-blur="saveUpdatedPrice(item)" type="text" placeholder="Enter Price" focus-me="item.showUpdatePrice"> </div> </td> </tr> </tbody> </table> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { \t $scope.togglePrice = function (item) { \t item.showUpdatePrice = !item.showUpdatePrice; \t } $scope.shoppingItems = [ { "showUpdatePrice" : false, "sellingPrice" : "10" }, { "showUpdatePrice" : false, "sellingPrice" : "20" }, \t { "showUpdatePrice" : false, "sellingPrice" : "30" }, ] }); app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) { return { link: function (scope, element, attrs) { var model = $parse(attrs.focusMe); scope.$watch(model, function (value) { if (value === true) { $timeout(function() { element[0].focus(); }); } }); element.bind('blur', function() { scope.$apply(model.assign(scope, false)); }); } }; }]); </script> </body> </html>

は、私はこれを試した上のコード

Here is a working DEMO

出典

2017-02-22 06:32:43 Sravan

ありがとう..これは動作します:) –

で、それはあなたを助けかもしれません。インデックスに従って、inputsに一意のIDを追加します。したがって、最も効率的なものを使用して簡単にアクセスできますjavascriptselector。

はあなた javascript

$scope.togglePrice = function (item, buttonClicked) { 
    item.showUpdatePrice = true; 
    setTimeout(function(){ 
     document.getElementById(buttonClicked).focus(); 
    }); 
    }

にを変更し、 html

<tbody ng-repeat="item in shoppingItems"> 
    <tr> 
    <td class="priceDiv"> 
    <div> 
     <a ng-click="togglePrice(item, $index)" ng-hide="item.showUpdatePrice" style="text-decoration:underline; cursor:pointer;">{{item.sellingPrice | currencyFormat}}</a> 
     <input id='{{$index}}' ng-model="item.sellingPrice" auto-focus class="form-control" ng-class="{'errorClass': showPriceError}" ng-show="item.showUpdatePrice" ng-blur="saveUpdatedPrice(item)" type="text" placeholder="Enter Price"> 
    </div> 
    </td> 
    </tr> 
    </tbody>

で、これは、それはあなたを助けかもしれませ試してみてください

。ありがとう

出典

2017-02-22 05:54:42

を実行してください。 Not working、ページの読み込み時に、指示文がトリガされていますが、その時点ではテキストボックスは表示されません。テキストボックスが表示されているテキストをクリックすると表示されます。 –

これはテーブルで、各行にはidがupdatePriceIdのテキストボックスがあります。だからIDは動かさない –

@ I'mnidhinオレはそれを得て、私の答えを更新した。 –

角度JS - ダイナミックに作成されたテキストボックスに焦点を合わせる

答えて

関連する問題