【问题标题】:How can I identify whether checkbox is checked or not in angularjs如何确定 angularjs 中是否选中了复选框
【发布时间】:2015-09-23 15:21:46
【问题描述】:

我有一个分配了 ng-model 的复选框,并自定义了 ng-true-value 和 ng-false-value。是否有 ng-something 可以检查复选框是否被选中?我也尝试使用 ng-checked 但根据https://docs.angularjs.org/api/ng/directive/ngChecked ng-model 和 ng-checked 不应该一起使用。

【问题讨论】:

    标签: angularjs checkbox


    【解决方案1】:

    你只需在 type='checkbox' 这样的简单输入标签中分配 ng-model

    <input type="checkbox" id="your_property" ng-model="your_property" />
    

    您将在“your_property”中收到真假。无需使用 ng-checked。

    【讨论】:

      【解决方案2】:

      你不需要使用 ng-checked,ng-model 就足够了,因为它可以给你 falsetrue(如果检查)。

      <!doctype html>
      <html lang="en">
      
      <head>
        <meta charset="UTF-8">
        <title>Checkbox</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>
      </head>
      
      <body ng-app="">
        <label>Checkbox demo:
          <input type="checkbox" ng-model="master">
        </label>
        <br/> My value is: {{master}}
      </body>
      
      </html>
      

      这里是笨蛋http://plnkr.co/edit/NaTBRCeq1BeqtinEbK2t?p=preview

      【讨论】:

        【解决方案3】:

        也许您正在搜索 ng-if ?! 在角度页面上引用的 plunker 中包含类似的内容:

        <span ng-if="master">Hello, I am checked.!</span>
        

        'master'是绑定到输入元素复选框的变量。

        【讨论】:

          【解决方案4】:
          there is no need of ng-checked. ng-model will have the value to true or false. 
          <div ng-app="">
                <input type="checkbox" ng-model="checked"/>
                {{checked}}
          </div>
          

          请查看http://jsfiddle.net/19v90cnv/中的示例

          【讨论】:

          • 我建议编辑您的答案以包含代码本身,并仅链接到 jsfiddle 以进行演示/参考。
          • 另外,从仅链接的答案到仅代码的答案并没有那么好 - 我建议确保您解释您的代码正在做什么,否则它可能会被删除。
          • 我已经添加了我的解释。感谢您的建议。
          猜你喜欢
          • 2011-06-12
          • 1970-01-01
          • 1970-01-01
          • 2011-04-18
          • 2017-03-12
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-10-31
          相关资源
          最近更新 更多