Angular JS - 專注於dyamically創建的文本框

我有一個表中的一個項目是可編輯的。點擊該項目後，文本將更改爲文本框並可進行編輯。問題是，單擊文本時，文本更改爲文本框，但我無法專注於文本框。這是代碼Angular JS - 專注於dyamically創建的文本框

$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

我嘗試這樣做。不工作，在頁面加載時，指令被觸發，當時沒有文本框顯示。只需點擊文本框即可看到文本框。 –

這是一張表格，每行都會有一個id爲updatePriceId的文本框。所以Id不會工作 –

@ I'mnidhin好吧，更新我的答案。 –

Angular JS - 專注於dyamically創建的文本框

回答

相關問題