Html 角度JS-关注动态创建的文本框

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

JS

HTML

{{item.sellingPrice | currencyFormat}

编辑

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

{{item.sellingPrice | currencyFormat}}

使用下面的代码更新您的代码，可能会对您有所帮助。它将根据索引为您的

输入添加唯一id。因此，您可以使用最高效的
javascript
选择器
访问它们

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


{{item.sellingPrice | currencyFormat}}

试试这个也许对你有帮助。谢谢
您应该对您的方法做一点小小的更改，并添加一条指令以实现您的解决方案

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

}

在此解决方案中，单击
文本框时，相应的文本框会聚焦，而在模糊或单击外部时，它会不聚焦。



单击以关注以下文本框：
{{item.sellingPrice}}
var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.togglePrice=函数（项目）{
item.showUpdatePrice=！item.showUpdatePrice；
}
$scope.shoppingItems=[
{
“showUpdatePrice”：false，
“销售价格”：“10”
},
{
“showUpdatePrice”：false，
“销售价格”：“20”
},
{
“showUpdatePrice”：false，
“销售价格”：“30”
},
]
});
app.directive（'focusMe'，['$timeout'，'$parse'，function（$timeout，$parse）{
返回{
链接：函数（范围、元素、属性）{
var模型=$parse（attrs.focusMe）；
范围$watch（型号、功能（价值）{
如果（值===true）{
$timeout（函数（）{
元素[0]。焦点（）；
});
}
});
元素绑定（'blur'，函数（）{
范围$apply（模型分配（范围，假））；
});
}
};
}]);
我试过这个。不工作，在页面加载本身上，指令被触发，此时不显示文本框。只有单击文本，文本框才可见。这是一个表，每行都有一个id为updatePriceId的文本框。所以我不会work@I'mnidhin确定，更新我的答案。@I'mnidhin您是否使用ng repet显示此数据？如果是，请共享您的ng重复代码。添加了ng-repeat
  <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>

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

}