Question

我有一个表格，其中一个项目是可编辑的。单击该项目时，文本将更改为文本框，并且可以对其进行编辑。问题是，在单击文本时，文本会更改为文本框，但我无法关注文本框。这是代码

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>

Answer 1

您应该对您的方法进行一些小改动，并添加一个指令来实现您的解决方案。

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

}

在此解决方案中，点击text-boxes后，相应的文本框会聚焦，在模糊或点击外部时，它会变得无关紧要。

＆＃13;

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

＆＃13;

请跑上面的SNIPPET

Here is a working DEMO

Answer 2

使用以下代码更新您的代码，可能会对您有所帮助。它会根据索引为您的inputs添加唯一ID。因此，您只需使用效率最高的javascript selector即可轻松访问它们。

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

试试这可能对你有帮助。感谢

Angular JS - 专注于动态创建的文本框

2 个答案: