angular.js - angularjs指令

问题描述

问 题

             <div id="btnG" class="chooseBtn">
                <input type='radio' id='boy' name='sex' value='boy'>
                <label for="boy">男</label>
                <input type='radio' id='girl' name='sex' value='girl'>
                <label for="girl">女</label>
              </div>
              哪个radio被选中，它的label就高亮显示
              <div id="bb">
                  男被选中，id="cc"的div隐藏，id="bb"的div显示
              </div>
              <div id="cc">
                  女被选中，id="cc"的div显示，id="bb"的div隐藏
              </div>
              
              这样的用angular指令怎么实现？

解决方案

直接给两个radio绑定同一个ng-model 然后使用ng-if或者ng-show控制cc和dd两个div的显示

<div id="btnG" class="chooseBtn">
   <input type='radio' id='boy' name='sex' value='boy' ng-model='sexValue' checked>
   <label for="boy">男</label>
   <input type='radio' id='girl' name='sex' value='girl' ng-model='sexValue'>
   <label for="girl">女</label>
</div>
<div id="bb" ng-if="sexValue == 'boy'">
</div>
<div id="cc" ng-if="sexValue == 'girl'">
</div>

label的高亮可以使用ng-class

这篇关于angular.js - angularjs指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！