How to reset input field and checkbox in angularjs
Question
I have a form with single input and another two checkbox labeled with Yes and No. I want to save the input value when i click yes [this is not the problem]. After clicking yes, input and checkbox should reset. How can i do that? setting ng-model to null is not working for me.
var app = angular.module("app", ['ionic']); app.controller("MainCtrl", function ($scope,$timeout,$state) { $scope.selected='other'; $scope.refresh = function(selected,answer){ if(selected == 'yes'){ $timeout(function(){ $scope.$apply(function(){ $scope.uncheck = false; }) },250); } } });
<html> <head> <link rel="stylesheet" href="http://code.ionicframework.com/1.3.2/css/ionic.css" /> <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.min.js"></script> </head> <body> <div class="bar bar-header bar-assertive"> <h1 class="title">Example</h1> </div> <div ng-app="app" style="margin-top:64px;padding:20px;"> <div ng-controller="MainCtrl" class="has-header"> <label class="item item-input"> <textarea msd-elastic ng-model="answer.three" placeholder="Your answer"></textarea> </label> <div> <ion-checkbox class="cs-checkbox" ng-model="selected" ng-true-value="'no'" ng-change="statethree(selected,answer)">No</ion-checkbox> <ion-checkbox class="cs-checkbox" ng-disabled="!answer.three" ng-checked="uncheck" ng-model="selected" ng-true-value="'yes'" ng-change="refresh(selected,answer)">Yes</ion-checkbox> </div> </div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2017-02-12 11:47:44
Below is working code with checkboxes but generally in such case it'd be better to use radio buttons (but it would chnage your UI design)
var app = angular.module("app", ['ionic']); app.controller("MainCtrl", function ($scope,$timeout,$state) { $scope.selected='other'; $scope.refresh = function(selected,answer){ if($scope.selected){ $timeout(function() { $scope.answer.three = ''; $scope.selected = ''; }, 250) }; } });
<html> <head> <link rel="stylesheet" href="http://code.ionicframework.com/1.3.2/css/ionic.css" /> <script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.min.js"></script> </head> <body> <div class="bar bar-header bar-assertive"> <h1 class="title">Example</h1> </div> <div ng-app="app" style="margin-top:64px;padding:20px;"> <div ng-controller="MainCtrl" class="has-header"> <label class="item item-input"> <textarea msd-elastic ng-model="answer.three" placeholder="Your answer"></textarea> </label> <div> <ion-checkbox class="cs-checkbox" ng-true-value="false" ng-model="selected">No</ion-checkbox> <ion-checkbox class="cs-checkbox" ng-disabled="!answer.three" ng-model="selected" ng-change="refresh(selected,answer)">Yes</ion-checkbox> </div> </div> </div> </body> </html>
Also please note that you shouldn't use $apply inside $timeout callback because $timeout already triggers angular digest cycle.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.