如何在开关关闭且开关打开时禁用标签?

时间:2015-01-06 12:01:38

标签: angularjs

嗨,当开关关闭时,标签应为灰色,如标签应禁用,如果开启则标签应启用使用角度

这里小提琴:http://jsfiddle.net/dgj7s5sk/8/

 <label>check1</label>
  <div class="onoffswitch">
 <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" 
  checked="checked" />
<label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>

</label>
</div>
  <label>check2</label>
  <div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2"  />
<label class="onoffswitch-label" for="myonoffswitch2"> <span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>

</label>
</div>

请问我这个问题。感谢

1 个答案:

答案 0 :(得分:5)

这是更新后的fiddle with solution.

在您的示例中,您没有将代码声明为有角度的应用。

我做了什么:

  1. 使用过的Angular框架(请参阅“Frameworks&amp; Extensions”下左侧的第一个dropown)
  2. 声明为角度应用。请参阅第1行<div ng-app>
  3. 为输入ng-modelswitches.switch1定义switches.switch2
  4. 为已禁用标签
  5. 定义了一个新类

    .disabled-class { color:gray; }

    1. 使用ng-class
    2. 应用条件类

      <label ng-class="(switches.switch1)?'':'disabled-class'">check1</label>

      <label ng-class="(switches.switch2)?'':'disabled-class'">check2</label>