CODEWITHSUNDEEP
htmlangularjsangularjs-directive
I'm nidhin
I'm nidhin

Reputation: 2662

Angular JS - Focus on dyamically created text box

I have a table in which one item is editable. On clicking that item, the text changes to a text box and it can be edited. The issue is, on clicking the text, the text changes to textbox but I'm not able to focus on the textbox. This is the code

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">

Edit

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

Upvotes: 1

Views: 63

Answers (2)

Sravan
Sravan

Reputation: 18647

You should make a small change to your method and should add one directive to achieve your solution.

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

}

In this solution, on click on the text-boxes, the respective textbox gets focussed, and on blur or clicking outside, it gets unfocussed.

<!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" 	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) {
	$scope.togglePrice = function (item) {
    	item.showUpdatePrice = !item.showUpdatePrice;
        
	}

  $scope.shoppingItems = [
    {
      "showUpdatePrice" : false,
      "sellingPrice" : "10"
    },
    {
      "showUpdatePrice" : false,
      "sellingPrice" : "20"
    },
	{
      "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>

PLEASE RUN THE ABOVE SNIPPET

Here is a working DEMO

Upvotes: 1

Manoj Lodhi
Manoj Lodhi

Reputation: 988

Update your code with below code, may be it helps you. It will add a unique id to your inputs according to index. So you can simply access them using most efficient javascript selector.

Change your javascript to 

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

And in 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>

Try this May be it helps you. Thanks

Upvotes: 0

Related Questions