angular.js - angularjs指令

Question

             <p 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>
              </p>
              哪个radio被选中，它的label就高亮显示
              <p id="bb">
                  男被选中，id="cc"的p隐藏，id="bb"的p显示
              </p>
              <p id="cc">
                  女被选中，id="cc"的p显示，id="bb"的p隐藏
              </p>
              
              这样的用angular指令怎么实现？

Answer 1

Directly bind the same ng-model to two radios and then use ng-if or ng-show to control the display of cc and dd

<p 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>
</p>
<p id="bb" ng-if="sexValue == 'boy'">
</p>
<p id="cc" ng-if="sexValue == 'girl'">
</p>

Label can be highlighted using ng-class