jQuery Mobile 和 AngularJS 复选框水平

Question

同时使用 jQuery Mobile 和 AngularJS，没有插件但阅读过它，首先加载 jQuery，这两个框架大部分都很好玩，而且两者都非常强大。

尝试使用

呈现 jQuery Mobile 复选框

<div data-role="fieldcontain">
  <legend>Showing more lodges slows the display</legend>
  <fieldset data-role="controlgroup" data-type="horizontal">
      <label ng-repeat-start="(lodgekey, lodge) in data.lodges" for="chooser_{{lodgekey}}">{{lodge.lodgetitle}}</label>
      <input ng-repeat-end id="chooser_{{lodgekey}}" type="checkbox" ng-model="lodge.selected" />
    </div>
  </fieldset>
</div>

问题是 jQuery Mobile 在 Angular 重复之前完成了将复选框设置为按钮。因此，即使我在字段集中使用了 data-type="horizo​​ntal"，重复的复选框也会垂直堆叠，并且每个复选框都显示为第一个/最后一个孤儿 - 它们在 AngularJS 执行其 ngRepeat 之前。查看http://demos.jquerymobile.com/1.0a4.1/docs/forms/forms-checkboxes.html 的代码示例并查看呈现的 DOM 会显示它应该呈现的方式。

Answer 1

到目前为止，我的解决方案是使用 Angular 重现 jQuery Mobile 表单，但这并不理想，这是我的代码：

<div data-role="fieldcontain" id="lodge-chooser">
  <legend>Showing more lodges slows the display</legend>
  <fieldset data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-checkbox" ng-repeat="(lodgekey, lodge) in data.lodges">
      <label ng-class="{'ui-btn-active':lodge.selected, 'ui-corner-left':$first, 'ui-corner-right':$last}" for="{{lodgekey}}">{{lodge.lodgetitle}}</label>
      <input id="{lodgekey}}" type="checkbox" ng-model="lodge.selected" />
    </div>
  </fieldset>
</div>

和 CSS：

/* remove incorrect rounded corners which appear on all buttons*/
div#lodge-chooser label.ui-btn.ui-corner-all {
  border-radius:0!important;
}

/* reinstate rounded corners in correct places */
div#lodge-chooser label.ui-btn.ui-corner-left {
  border-bottom-left-radius:inherit!important;
  border-top-left-radius:inherit!important;
}
div#lodge-chooser label.ui-btn.ui-corner-right {
  border-bottom-right-radius:inherit!important;
  border-top-right-radius:inherit!important;
}

这行得通，注意 div.ui-checkbox 是冗余嵌套的，因为 jQuery Mobile 仍然添加它，但我的添加提供了所需的样式，并且额外的嵌套 div 似乎没有任何危害。