I have the following input field in my view
<input type="number" min="0" placeholder="7500" ng-model="totalClicks" required>
What I want now is to set the model variable total totalClicks
to an initial value that is not reflected to the UI unless the user makes an input.
If I initialize with
$scope.totalClicks = {};
or
$scope.totalClicks = '';
then the placeholder is shown correctly until the user makes an input. However, the model variable totalClicks is not updated and remains as initialized.
If I set it to
$scope.totalClicks = 0;
then 0
is shown in the input and the placeholder isn't but the model is updated.
Any advices?
UPDATE:
Added
$scope.funnel = {};
$scope.funnel.totalClicks = 9;
<input type="number" min="0" placeholder="7500" ng-model="funnel.totalClicks" required>
Now the placeholder is shown on page load but $scope.funnel.totalClicks
remains 9
when I change the input
UPDATE #2: Here's an example on plunker. There're 2 text boxes bound to the same model therefore when I change the model in one input box the other one should change as well. (Example includes ionic framework) http://plnkr.co/edit/F4fOGMBA8eFJ9vdyuDvm
Following is the working example for updating the totalClicks ngModel.
<html ng-app="ExamplesApp">
<head>
<script src="angular.js"></script>
</head>
<body ng-controller="ExCtrl">
<input type="number" min="0" placeholder="7500" ng-model="totalClicks" required>
<button ng-click="clicks()">Click</button>
<script type="text/javascript">
angular.module('ExamplesApp',[]);
angular.module('ExamplesApp')
.controller('ExCtrl',function($scope){
$scope.totalClicks = '';
$scope.clicks= function(){
alert($scope.totalClicks);
};
});
</script>
</body>
</html>
JSFiddle : http://jsfiddle.net/StT2y/2/
define the value and model as a property on the totalClicks object.
$scope.totalClicks = {}
$scope.totalClicks.amount = 0;
<input type="number" min="0" placeholder="7500" ng-model="totalClicks.amount" required>