AngularJS checkbox uncheck

Question

How in angular when a checkbox is uncheck, the form data will be reset.

      <div class="form-group">
                <input type="text" verify-store ng-model="user.merchant_store_name" class="form-control" name="merchant.store_name" placeholder="Store Name" ng-model-options="{ updateOn: 'blur' }" required>
                <div ng-if="signupForm.$pending.usernameExists">verifying....</div>
                <div ng-if="signupForm.$error.usernameExists[0].$viewValue">
                <label class="control-label" style="color:red">A store with that name already exists. Please select another name.</label>
            </div>

        <div class="form-group">
                <input type="text" class="form-control" ng-model="user.merchant_mobile_phone" placeholder="Phone" >
        </div>

            </div>


<div class="checkbox clip-check check-primary">
    <input type="checkbox" id="agree"  ng-model="signupForm.agree" value="agree" ng-required="!signupForm.agree">
    <label for="agree">I agree</label>
</div>

 <div class="checkbox clip-check check-primary" ng-show="signupForm.agree">
        <input type="checkbox" id="merchant"  ng-model="signupForm.merchant" value="merchant" >
        <label for="merchant">Sign up as merchant</label>
  </div>

Is there a way this can be done within the view template rather than passing it to controller. Or should I write a directive for this?

Thanks!!

@dfsq there is an option where if user check a checkbox, extra div displayed and user had to fill up infos, uncheck will hide the div but not reset the data within — d3bug3r
– d3bug3r, Commented Oct 24, 2015 at 9:05

Charlie · Accepted Answer · 2015-10-24 09:15:49Z

2

You don't have to write a single line in your controller to achieve your task with the following two DOM settings.

<input type="text" ng-model="myText">
<input type='checkbox' ng-model='chkMonitor'  ng-click='!chkMonitor && (myText = "")' >

Explanation:

Your inputs are bound to the scope through scope variables. Now you place your code in ng-click of the check box to execute the clearing code. This has to be done only when the check box is unchecked. So, first check for this in a boolean expression before executing your clearing code :

ng-click='!chkMonitor && (myText = "")'

Your myText = "" will never execute as long as the chkMonitor is false.

answered Oct 24, 2015 at 9:15

Charlie

24k12 gold badges65 silver badges96 bronze badges

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

2 Comments

d3bug3r Over a year ago

Why the form is still not clear out once I check again? ng-click='!signupForm.merchant && (user.merchant_store_name = "")'

Charlie Over a year ago

Here is a fiddle which demonstrates this code. jsfiddle.net/charlie2002/jj3h63cp/1

Collectives™ on Stack Overflow

AngularJS checkbox uncheck

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related