发表新帖
发表新帖

how to show/hide a div on the basis of a checkbox selection in angular js

前端 未结
关注
4 905
囚心锁ツ
囚心锁ツ 2021-01-03 19:58

I have a checkbox and a div on my page.
相关标签:
4条回答
  • 谎友^
    2021-01-03 20:08

    I think you are looking for ng-true-value and ng-false-value

    <div ng-app>
    <div >
        <input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>        
    </div>

    <div ng-show="check == 'A'">
        Checked
    </div>
</div>

    Fiddle

    0 讨论(0)
  • 猫巷女王i
    2021-01-03 20:17

    Input type checkbox return true false in ng-model so i just use this. Its working

       <div ng-app>
   <div >
      <input type="checkbox" ng-model="check"/>        
  </div>

  <div ng-show="check == true">
     Checked
  </div>
    0 讨论(0)
  • 一向
    2021-01-03 20:23 
    <body ng-app>
     <label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
     <label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
     <label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/> 
     Show when checked:
     <div ng-if="Wolf">
     <span> This is removed when the wolf is checked.
     </span>
     </div>

<div ng-if="Tiger">
    <span> This is removed when the tiger is checked.
    </span>
</div>
<div ng-if="Lion">
    <span> This is removed when the lion is  checked.
    </span>
</div>
</body>
    0 讨论(0)
  • 死守一世寂寞
    2021-01-03 20:26

    Have you tried it this way? Here's the fiddle It works great.

    <input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
  <label for="FirstName" class="col-md-9">
    Are you interested in Animal Liability Coverage?
  </label>
  <div class="col-md-3">
    <label>
      <input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
      <input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
    </label>
  </div>
</div>
    0 讨论(0)
 看不清?
提交回复
热议问题