Angularjs input textbox
I have a situation like this:
With some input text. When I fill in the input, I can hide them with a button. What I need is that when typing hides all the content inside that was typed clearly. So when I click the Show button, the input should be empty. I cannot use ngIf before anyone asks me.
This is the code:
<div ng-controller="myCtrl">
<button ng-click="hideStuff()">Hide!</button>
<button ng-click="showStuff()">Show!</button>
<div ng-repeat="item in inputFileds">
<input placeholder="{{item.label}}" class="default" ng-hide="hidden" ng-class="{'fade': startFade, 'show': !startFade}" type="text" ng-model="item.value" />
</div>
</div>
And javascritp
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", function($scope, $timeout) {
$scope.hideStuff = function() {
$scope.startFade = true;
$timeout(function() {
$scope.hidden = true;
}, 700);
};
$scope.showStuff = function() {
$scope.startFade = false;
$timeout(function() {
$scope.hidden = false;
}, 700);
};
$scope.inputFileds = [{
"label": "input1",
"value": ""
}, {
"label": "input2",
"value": ""
}, {
"label": "input3",
"value": ""
}, {
"label": "input4",
"value": ""
}];
});
source to share
You can avoid such problems with proper design!
Why are you putting configuration data (labels) in the model? Divide them into 2 objects as labels are static, but input field values are not. You can just reset modally simple.
$scope.model = {};
So that it doesn't need to reset every single field!
source to share
Try reinitializing your input fields: -> http://jsfiddle.net/maralik/f8erG/56/
$scope.showStuff = function () {
$scope.initInputFields();
$scope.startFade = false;
$timeout(function(){
$scope.hidden = false;
}, 700);
};
$scope.initInputFields = function() {
$scope.inputFileds = [{
"label": "input1",
"value": ""
},{
"label": "input2",
"value": ""
},{
"label": "input3",
"value": ""
},{
"label": "input4",
"value": ""
}];
};
$scope.initInputFields();
source to share
I added
for(var i = 0; i < $scope.inputFileds.length; ++i) {
$scope.inputFileds[i].value = "";
}
in your hide function.
It is important to understand that angular uses double binding in this case. This means that if you update your model inside the controller, it will be reflected back. This is why you can change the model object and the form will show an empty input field.
source to share