使用带有 angularjs 和 jquery mobile 的翻转切换开关

Posted 2023-05-09

【中文标题】使用带有 angularjs 和 jquery mobile 的翻转切换开关

【英文标题】：using a flip toggle switch with angularjs and jquery mobile

【发布时间】：2012-08-21 06:22:27

【问题描述】：

如何在 AngularJS 和 jQuery Mobile 中使用翻转切换开关？

以下 sn-p 包含一个不被 angular 选中的翻转切换开关和一个被 angular 检查的注释复选框：

<div data-role="content">
  <ul id="pumps" data-role="listview">
    <li ng-repeat="pump in fleetManager.pumps"
      ngm-click="fleetManager.toggleBuzzer(pump)"><span>pump.sn</span>
      <span>
        <!-- FIXME: does not select the marked option -->
        <select data-role="slider">
          <option value="silent">Silent</option>
          <option value="beeping" ng-selected="pump.status!=0">Beeping</option>
        </select>
        <!-- NOTE: this one works as expected -->
        <!--input type="checkbox" ng-checked="pump.status!=0"-->
    </span></li>
  </ul>
</div>

【参考方案1】：

将ng-model 属性添加到<select> 标记使其工作：

<select data-role="slider" ng-model="somemodel">
    <option value="silent">Silent</option>
    <option value="beeping" ng-selected="true">Beeping</option>
</select>

【参考方案2】：

发现控件在列表视图中没有很好地集成。 改变了设计。

【参考方案3】：

我开发了一个开源指令（引导程序）。 你可以用它来做到这一点， 见文档：https://github.com/timactive/angularjs/tree/master/directive/ng-switch-toggle 您可以查看示例：http://plnkr.co/Qo7QtmFbrEsCbEOauDvY。