使用ng-options选择输入
使用ng-options选择输入
提问于 2016-02-07 01:05:03
我使用ng-options来选择input.But，只是不填充下拉列表。我使用materialize css作为css框架。
以下是我的代码
<div class="col s6" >
<select ng-options="bucket.id as bucket.name for bucket in buckets track by bucket.id" ng-model="new_transaction.bucket"></select>
</div>Js代码
$scope.new_transaction = {
"bucket":""
}
$scope.buckets = [
{
id:1,
name:"bucket-1"
},
{
id:2,
name:"bucket-2"
}
]
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('select').material_select();
});注意:控制台中没有错误。dropdown元素上的inspect元素向我展示了
<div class="select-wrapper">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-b1cded87-bee7-c9cd-5564-c613f7439e7a" value="">
<ul id="select-options-b1cded87-bee7-c9cd-5564-c613f7439e7a" class="dropdown-content select-dropdown" style="width: 294px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
</ul>
<select ng-options="bucket.id as bucket.name for bucket in buckets track by bucket.id" ng-model="new_transaction.bucket_id" class="initialized ng-pristine ng-untouched ng-valid"><option value="?" selected="selected"></option>
<option label="Bucket-1" value="1">Bucket-1</option>
<option label="Bucket-2" value="2">Bucket-2</option></select>
回答 3
Stack Overflow用户
发布于 2016-02-07 01:13:58
你可以申请
$('select').material_select();只有当你准备好了，ngOptions指令才会完成。最简单和最常用的解决方案是将插件初始化放在$timeout中：
$timeout(function(){
$('select').material_select();
})Stack Overflow用户
发布于 2016-02-07 01:24:14
您已经包含了angular，但是您还没有正确地设置它来实际使用它。您需要创建一个模块、一个控制器和一个指令来完成您想要完成的任务。
angular.module('app', []);
angular.module('app').controller('AppController', ['$scope', function($scope) {
$scope.new_transaction = {
bucket:""
};
$scope.buckets = [
{
id:1,
name:"bucket-1"
},
{
id:2,
name:"bucket-2"
}];
}]);
angular.module('app').directive('materialSelect', function() {
return {
restrict: 'A',
link: function(scope, elem) {
$(elem).material_select();
}
};
});在body标签上，包括：
<body ng-app="app">在主要内容的容器上，包括：
<div ng-controller="AppController">
<!-- your other content including the select -->
</div>然后使用materialSelect指令作为属性，如下所示：
<select material-select ng-options="bucket.id as bucket.name for bucket in buckets track by bucket.id" ng-model="new_transaction.bucket"></select>Stack Overflow用户
发布于 2016-09-20 15:17:36
如果您之前已经对存储桶进行了初始化，那么和异步请求ng-options将使其为空，因为ng-options在第一次修改时会获取存储桶。例如：
$scope.buckets = [];
$http.get('/get buckets/').then(function (result) {
$scope.buckets = result.data;
});因此，删除$scope.buckets = [];会使ng-options等待，直到回调后将其装入存储桶。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35243809
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号