Question

使用复选框如何隐藏和显示范围。如果选中复选框，则应显示跨度，如果取消选中则不应使用角度

显示

   <div class="flw vreq2">
        <label>Voting require2</label>
        <div class="oneline">
       <div class="onoffswitches">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-
         checkbox"id="myonoffswitch7"/>
                <label class="onoffswitch-label" for="myonoffswitch7">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                 </label>
         </div>
         <span class="teamsize">
         <label>Team Size</label><input type="text" />
         </span>
         </div>
      </div>

Answer 1

像这样使用：

<input type="checkbox" ng-model="val" ng-true-value="true" ng-false-value="false"/>
    <span ng-show="val">hello world</span>

Answer 2

您可以在span标记中使用ng-show或ng-hide。 https://docs.angularjs.org/api/ng/directive/ngShow

Answer 3

你的小提琴示例显示你甚至没有引导AngularJs。您确定选择了正确的标签吗？你想在AngularJs中解决这个问题吗？如果是的话，我建议你先了解AngularJs的基础知识。这是你问题的答案。

您的HTML必须如

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <input type="checkbox" ng-model="checkBoxValue" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch7"/>
                <label class="onoffswitch-label" for="myonoffswitch7">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                 </label>

         <div ng-hide="checkBoxValue">
         <span class="teamsize">
         <label>Team Size</label><input type="text" />
         </span>  
         </div>


  </body>

</html>

参考：http://plnkr.co/edit/sc2xRQCYOi22D9AYqCrX?p=preview

Answer 4

我找到了最好的答案

<input type="checkbox" name="onoffswitch" class="onoffswitch-
       checkbox"id="myonoffswitch7" ng-model="checked" />

<span class="teamsize" ng-hide="checked">
  <label>Team Size</label><input type="text" />
</span>

如何隐藏和显示使用角度更改复选框的div？

4 个答案: