AngularJS复选框取消选中

时间:2015-10-24 09:00:06

标签: javascript angularjs

取消选中复选框时的角度如何,表单数据将被重置。

      <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>

是否可以在视图模板中完成此操作,而不是将其传递给控制器​​。或者我应该为此写一个指令吗?

谢谢!

1 个答案:

答案 0 :(得分:2)

您不必在控制器中编写一行来使用以下两个DOM设置来完成任务。

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

说明:

您的输入通过范围变量绑定到范围。现在,您将代码放在复选框的ng-click中以执行清算代码。只有在未选中复选框时才必须执行此操作。因此,在执行清算代码之前,首先在布尔表达式中检查:

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

只要myText = ""为false,您的chkMonitor就永远不会执行。