我正在尝试在选择按钮中获取选项,但它没有显示出来。
我的代码如下:
的index.html:
<select ng-model="main.order" ng-options="order as order.title for order in main.orders"></select>
app.js:
$http.get('src/json/sortingKeys.json').success(function(response){
vm.orders = response.orders;
vm.order = vm.orders[0];
});
在它工作正常之前,我在选择选项中获取值。但后来我想使用http://materializecss.com/about.html的材料设计。 我也初步确定了#34;选择&#34;按照他们的说法:
$(document).ready(function(){ $('select').material_select();});
尽管我正在获取html页面的值,但我没有将它们放入选择选项中。请参考下面的代码,我在浏览器中检查后可以看到:
<div class="select-wrapper"><input class="select-dropdown" readonly="true"
data-activates="select-options-082235b8-d9be-505d-90ab-c4cc9b9bb765" value=""
type="text"><i class="mdi-navigation-arrow-drop-down"></i>
<select class="selectOptions ng-pristine ng-untouched ng-valid initialized" ng-model="main.order"
ng-options="order as order.title for order in main.orders">
<option selected="selected" label="Year Ascending" value="object:16">Year Ascending</option>
<option label="Year Descending" value="object:17">Year Descending</option>
<option label="Title Ascending" value="object:18">Title Ascending</option>
<option label="Title Ascending" value="object:19">Title Ascending</option>
</select>
</div>
请让我知道我做错了什么。代码可在github上获得:https://github.com/pradeepb6/firstExample/tree/master/app
答案 0 :(得分:2)
我在this issue中解释了如何修复它。
基本上你需要为所有选择元素创建一个指令,它可以绑定到 select 元素,并在其链接函数中调用$(element).material_select();
。
此外,由于它不知道来自服务器的数据何时完成,因此您需要完全阻止创建选择。一个 ngIf 就可以了。所以你的选择将如下所示:
<select
ng-model="main.order"
ng-options="order as order.title for order in main.orders"
ng-if="main.orders">
</select>
至于指令,您可以使用this one。我在我的代码中使用它很快就会生产;)
答案 1 :(得分:2)
当你'下拉'(双关语)使用默认浏览器方法而不是实现它时,这种情况总是有效:
<select class="browser-default" ng-model="student.name">
<option ng-repeat="item in students" value="{{ item.$id }}"> {{ item.name }} </option>
</select>
带走是class="browser-default"
部分。见这里:http://materializecss.com/forms.html
样式看起来不像材质,但是,您可以使用几行CSS来设置样式,而不会丢失动态渲染功能。