javascript - AngularJS 复选框取消选中

标签 javascript angularjs

取消选中复选框时, Angular 如何重置表单数据。

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

有没有一种方法可以在 View 模板中完成此操作,而不是将其传递给 Controller ​​。或者我应该为此编写一个指令?

谢谢!!

最佳答案

使用以下两个 DOM 设置,您无需在 Controller 中编写一行即可完成任务。

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

说明:

您的输入通过范围变量绑定(bind)到范围。现在,您将代码放置在复选框的 ng-click 中以执行清除代码。仅当取消选中该复选框时才必须执行此操作。因此,在执行清除代码之前,首先在 bool 表达式中检查这一点:

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

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

关于javascript - AngularJS 复选框取消选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33316358/

相关文章:

javascript - 如何使用自定义按钮在 Summernote 中添加 HTML 标签?

Javascript 将对象作为函数参数传递

javascript - 如何在javascript中设置定时器

javascript - 根据嵌套值对 Angular ng-repeat 列表进行排序

javascript - 如何使用网络浏览器呈现 NoSQL 数据中的换行符?

javascript - Angular 模态实例无法读取 DOM 元素

javascript - Angular Controller 内的 Jquery 单击事件问题 : loop many times

javascript - 将 'Swiper' JS 库用于我的原型(prototype)时的 CSS 挑战

Javascript RegEx 将所有单词提取为单个匹配项,但不提取字符串中的数字

AngularJS : Setting languages in angular-translate from Controller or Service