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的完設置的複選框作爲前角的按鈕操作的方式重複。所以重複的複選框垂直疊加，即使我在字段集中使用了data-type =「horizo​​ntal」，每個複選框都顯示爲first/last orphan - 它們在AngularJS執行它的ngRepeat之前。查看http://demos.jquerymobile.com/1.0a4.1/docs/forms/forms-checkboxes.html的代碼示例，並查看呈現的DOM顯示其呈現方式。

Answer 1

我的解決方案迄今已重現採用了棱角分明的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似乎沒有任何傷害。