Question

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

以下代码段包含一个无法通过角度选择的翻转切换开关和一个通过角度检查的注释复选框：

<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>

Answer 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>

Answer 2

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

Answer 3

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

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

3 个答案: