使用ng-options作为选择输入
[英]Using ng-options for select input
问题描述
I am using ng-options for select input.But it is just not populating the drop down list.I am using materialize css as css framework. 
我正在使用ng-options作为select输入，但是它只是没有填充下拉列表，而是使用物化CSS作为CSS框架。
Here is my code 这是我的代码
<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 Code 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();
});
Note :There are no errors in the console. 注意：控制台中没有错误。 And the inspect element on the dropdown element shows me 下拉元素上的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 个解决方案
解决方案1
0 2016-02-06 17:13:58
you can apply 你可以申请
$('select').material_select();
only when you are ready that ngOptions directive is done. 仅当您准备好ngOptions指令完成时。 the simplest and most used solutions is to put plugin init inside $timeout: 最简单，最常用的解决方案是将插件init放在$ timeout内：
$timeout(function(){
$('select').material_select();
})
解决方案2
0 2016-02-06 17:24:14
You've included angular, but you haven't set it up properly to actually use it. 您已经包含了angular，但是尚未正确设置它以实际使用它。 You need to create a module, a controller and a directive for what you're trying to accomplish. 您需要为要完成的任务创建一个模块，一个控制器和一个指令。
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();
}
};
});
On your body tag, include: 在您的身体标签上，包括：
<body ng-app="app">
On the container of your main content, include: 在您的主要内容的容器上，包括：
<div ng-controller="AppController">
<!-- your other content including the select -->
</div>
Then use the materialSelect directive as an attribute like this: 然后使用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>
解决方案3
0 2016-09-20 07:17:35
If you have initialized buckets before and asynchronous request ng-options will get it empty because ng-options took buckets first time it was modified. 如果您之前已初始化存储桶 ，并且异步请求ng-options会将其清空，因为ng-options首次修改了存储桶。 For example: 例如：
$scope.buckets = [];
$http.get('/get buckets/').then(function (result) {
$scope.buckets = result.data;
});
So removing $scope.buckets = []; 因此，删除$scope.buckets = []; makes ng-options wait until buckets its puplated after callback. 使ng-options等到回调后将其存储桶化。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.