Input placeholder set when loading the view

Question

I have the following Input field

<input type="number" ng-model="data.mainOdd1" min="0" step="any" placeholder="#1 Main Odd" onfocus="this.placeholder=''" 
         aw-limit-length="6" ui-blur="mainInputsChange('mainOdd1', $event, '#1 Main Odd');" 
           ng-focus="mainOdd1Border = ''; mainOdd2Border = ''; bkOdd1Border = ''; bkOdd2Border = ''; mainOdd1Value = ''; bkOdd1Value = ''; bkOdd2Value = ''; bkOdd3Value = '';" 
             ng-style="mainOdd1Border">

It works fine at the beginning and the placeholder is set correctly

In the controller I have set up the following function

$scope.$on('$ionicView.enter', function() {
  $scope.data.mainOdd1 = '',
  $scope.data.mainOdd2 = '',
  $scope.data.bkOdd1 = '',
  $scope.data.bkOdd2 = '',
  $scope.data.result = 0,      
  $scope.data.win = '',                        
  $scope.data.winStake = 0,                
  $scope.data.backup1 = 0,
  $scope.data.return1 = '',                        
  $scope.data.return1Stake = 0,                      
  $scope.data.backup2 = 0,
  $scope.data.return2 = '',                        
  $scope.data.return2Stake = 0,                            
  $scope.data.backup3 = 0,  
  $scope.data.return3 = '',                        
  $scope.data.return3Stake = 0
})

to initialize the variables at the beginning.

What happens is that when I switch to another view and switch back to this one, the field is empty without the placeholder.

Anyway to fix that? I tried using the onLoad function but I'm not sure I'm using it correctly

Thanks

Answer 1

A shorthand version of how it can be done with angular.

I strongly advise against the use of the ng-init; declare pText1 in your controller. If you are doing this for multiple inputs I would create functions for the focus and blur actions as well as a map for the intended values.

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <input type="number" placeholder="{{pText1}}" ng-init="pText1 = 'Placeholder Text'" ng-focus="pText1 = ''" ng-blur="pText1 = 'Placeholder Text'" /> </div>