jQuery 移动 Multi-Select 来自异步数据
jQuery Mobile Multi-Select from asynchronous data
我在使用 jQuery 手机和 AngularJS 时遇到一点问题。
我想要一个 multi-select 以便用户可以选择一个类别。类别有 parents 和子项。整个结构来自数据库,因此它是一个异步调用来获取数据。
问题是 select 元素有数据但不显示数据,除非您单击第一个空选项。
也许我会展示比讲述更好
http://plnkr.co/edit/7UwGjSRfGEnhIvSrtGjV
<div ng-show="catsready" id="jqselect">
<label for="multiselect" class="select">Multi-select:</label>
<select id="multiselect" multiple="multiple" data-native-menu="false" data-icon="bars" data-iconpos="left">
<option>Choose a few options:</option>
<optgroup ng-repeat="parent in cats" label="{{parent.name}}">
<option ng-repeat="child in parent.childs" value="" jq-select>{{child.name}}</option>
</optgroup>
</select>
</div>
在 angular 拥有 added/changed 选项组和选项后,您需要告诉 jQM 刷新选择菜单小部件:
$("#multiselect").selectmenu("refresh", true);
API 文档:http://api.jquerymobile.com/selectmenu/#method-refresh
我在使用 jQuery 手机和 AngularJS 时遇到一点问题。
我想要一个 multi-select 以便用户可以选择一个类别。类别有 parents 和子项。整个结构来自数据库,因此它是一个异步调用来获取数据。
问题是 select 元素有数据但不显示数据,除非您单击第一个空选项。
也许我会展示比讲述更好
http://plnkr.co/edit/7UwGjSRfGEnhIvSrtGjV
<div ng-show="catsready" id="jqselect">
<label for="multiselect" class="select">Multi-select:</label>
<select id="multiselect" multiple="multiple" data-native-menu="false" data-icon="bars" data-iconpos="left">
<option>Choose a few options:</option>
<optgroup ng-repeat="parent in cats" label="{{parent.name}}">
<option ng-repeat="child in parent.childs" value="" jq-select>{{child.name}}</option>
</optgroup>
</select>
</div>
在 angular 拥有 added/changed 选项组和选项后,您需要告诉 jQM 刷新选择菜单小部件:
$("#multiselect").selectmenu("refresh", true);
API 文档:http://api.jquerymobile.com/selectmenu/#method-refresh