AngularJS-在控制器中动态更改输入占位符

时间:2019-04-11 08:24:18

标签: angularjs

我有以下HTML:

<input id="identification" name="identification" type="text" placeholder="{{trackingLoginCtrl.owcs.owcsDocumentPlaceHolder}}" ng-model="trackingLoginCtrl.owcsDocument" required="">
<p ng-click="trackingLoginCtrl.clickDotsIcon()">dots</p>

在我的控制器中:

clickDotsIcon(){
        let vm = this;

        if(vm.owcs.owcsDocumentPlaceHolder === vm.$scope.trackingLoginCtrl.owcs.owcsDocumentPlaceHolder){
            vm.$scope.trackingLoginCtrl.owcs.owcsDocumentPlaceHolder = vm.owcs.owcsButtonTitle;
        }else{
            vm.$scope.trackingLoginCtrl.owcs.owcsDocumentPlaceHolder = vm.owcs.owcsDocumentPlaceHolder;
        }       
    }

当我单击圆点时,我需要将占位符更改为新的占位符,如果再次单击它,则将其更改回原来的位置。我设法将其更改为新的而不是旧的。

2 个答案:

答案 0 :(得分:0)

假设两个占位符值都是动态的并且可以在运行时更改,则可以按以下方式进行处理。

HTML

storeSize()

JS

<input id="identification" name="identification" type="text" placeholder="{{trackingLoginCtrl.placeHolderValues[trackingLoginCtrl.currentPlaceholderIndex]}}" ng-model="trackingLoginCtrl.owcsDocument" required="">
<p ng-click="trackingLoginCtrl.clickDotsIcon()">dots</p>

答案 1 :(得分:0)

您要动态更改占位符。您可以按照以下方式解决您的问题!

function LoginController($scope) {
   $scope.owcsDocument = '';
   $scope.placeHolderIndex = false;
   
   $scope.clickDotsIcon = function(){
   
   $scope.placeHolderIndex = !$scope.placeHolderIndex;
   }
   
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-app ng-controller="LoginController">
    <input type="text" name="fname" placeholder="{{placeHolderIndex}}" ng-model="owcsDocument">
    <button type="button" ng-click="clickDotsIcon()">dots</button>
</div>