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>

Bartek Fryzowicz · Accepted Answer · 2017-02-12 12:06:57Z

1

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.

edited Feb 12, 2017 at 12:06

answered Feb 12, 2017 at 11:47

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Surya Prasad Khanal Over a year ago

Thank you very much for this solution.

Collectives™ on Stack Overflow

How to reset input field and checkbox in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related