Angularjs - 专注于动态创建的文本框答案

【问题标题】：Angular JS - Focus on dyamically created text boxAngularjs - 专注于动态创建的文本框
【发布时间】：2017-02-22 15:32:09
【问题描述】：

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

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

【问题讨论】：

标签： html angularjs angularjs-directive

【解决方案1】：

你应该对你的方法做一个小的改变，并应该添加一个指令来实现你的解决方案。

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

请运行上面的片段

Here is a working DEMO

【讨论】：

【解决方案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>

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

【讨论】：

我试过这个。不起作用，在页面加载本身上，该指令被触发，当时没有显示文本框。只有点击文本时，文本框才可见。
这是一个表格，每一行都会有一个带有 id updatePriceId 的文本框。所以我不会工作
@I'mnidhin 好的，正在更新我的答案。
@I'mnidhin 你在使用 ng-repet 来显示这些数据吗？如果是，请分享您的 ng-repeat 代码。
ng-repeat 添加