Флажки 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="горизонтальный" в наборе полей, и каждый из них отображается как первая / последняя сирота, как это было до того, как AngularJS выполнил свой ngRepeat. Просмотр примера кода на http://demos.jquerymobile.com/1.0a4.1/docs/forms/forms-checkboxes.html и просмотр визуализированного DOM показывает, как он должен отображаться.

Answer 1

Мое решение до сих пор заключалось в том, чтобы воспроизвести форму jQuery Mobile с использованием Angular, но это не идеально, вот мой код:

<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, кажется, не приносит никакого вреда.