Angularjs 使用ng选项选择输入_Angularjs_Select_Ng Options_Materialize

Angularjs 使用ng选项选择输入

angularjs select

Angularjs 使用ng选项选择输入,angularjs,select,ng-options,materialize,Angularjs,Select,Ng Options,Materialize,我正在使用ng选项来选择输入。但它并没有填充下拉列表。我正在使用物化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> 注意：控制台中没有

我正在使用ng选项来选择输入。但它并没有填充下拉列表。我正在使用物化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>

注意：控制台中没有错误。下拉元素上的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>


▼


桶-1
桶-2

您可以申请

$('select').material_select();

只有当您准备就绪时，ngOptions指令才会执行。最简单和最常用的解决方案是将plugin init放在$timeout内：

$timeout(function(){
   $('select').material_select();
})

您已经包括了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 ng-app="app">

<div ng-controller="AppController">
   <!-- your other content including the select -->
</div>

如果您之前有初始化的bucket，并且异步请求ng选项将使其为空，因为ng选项在第一次修改时使用bucket。例如：

$scope.buckets = [];

$http.get('/get buckets/').then(function (result) {
  $scope.buckets = result.data;
});

因此，删除

$scope.bucket=[]使ng选项等待，直到其在回调后失效。
我无法理解！“plugin init”是什么意思？在angular中使用$timeout
应用jquery插件是不好的做法。它应该是一个指令。并将$timeout放入指令：）这不是$timeout
的正确用法。在这种情况下不需要它。我已经做了所有这些，但我没有把整个代码放在问题中，因为它太大了，而且大部分都是不相关的。但是感谢您付出努力并编写了整个代码。控制台中没有错误。我已经在问题中指定了html元素输出。请检查。从那个html，它显示您的下拉列表已填充。您是否创建了我显示的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>

$scope.buckets = [];

$http.get('/get buckets/').then(function (result) {
  $scope.buckets = result.data;
});