jquerymobile&;AngularJS复选框水平
在没有插件的情况下同时使用jQuery Mobile和AngularJS,但已经阅读了相关内容,首先加载jQuery,这两个框架的性能都非常好,而且都非常强大 尝试使用呈现jQuery Mobile复选框jquerymobile&;AngularJS复选框水平,angularjs,jquery-mobile,angularjs-ng-repeat,jquery-mobile-checkbox,Angularjs,Jquery Mobile,Angularjs Ng Repeat,Jquery Mobile Checkbox,在没有插件的情况下同时使用jQuery Mobile和AngularJS,但已经阅读了相关内容,首先加载jQuery,这两个框架的性能都非常好,而且都非常强大 尝试使用呈现jQuery Mobile复选框 <div data-role="fieldcontain"> <legend>Showing more lodges slows the display</legend> <fieldset data-role="controlgroup" d
<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>
显示更多的小屋会减慢显示速度
{{lodge.lodgetitle}}
问题是jquerymobile在执行重复操作之前将复选框设置为按钮。因此,重复的复选框垂直堆叠,即使我在字段集中使用了data type=“horizontal”,并且每个复选框都显示为第一个/最后一个孤立项-这是AngularJS执行其重复之前的情况。查看上的代码示例并查看呈现的DOM显示了它应该呈现的方式。到目前为止,我的解决方案是使用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>
这是可行的,注意div.ui-checkbox是冗余嵌套的,因为jQuery Mobile仍然添加了它,但我的添加提供了所需的样式,并且额外的嵌套div似乎没有任何危害
/* 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;
}