选择不在Materialize CSS和AngularJS中呈现

Question

我正在为我的Angular应用程序使用Materialize CSS，由于某种原因， <select>元素无法渲染（什么都看不到；尽管当我右键单击检查元素时，我可以在此处看到<select> ）。 但是，当我将class = "browser-default"应用于它时，它开始工作。 如上一个答案，我还包括

$(document).ready(function() {
    $('select').material_select();
});

加载所有js文件后。 但是，它似乎不起作用。 知道可能是什么问题吗？

编辑：这是相关的文档： http ://materializecss.com/forms.html

Answer 1

就像在以下内容中找到的答案一样： 实体化CSS-选择“似乎不渲染”

您必须使用JS代码初始化选择：

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});

Answer 2

您需要调用$('select').material_select(); 角度加载后，例如：

您可以像这样进行选择：

<div class="input-field col s12">
    <select ng-model="year" ng-options="year for year in years">
        <option value="" disabled selected>Select a year</option>
    </select>
    <label>Year</label>
</div>

在控制器中加载年份列表时，必须使用setTimeout延迟方法$('select').material_select() 。 见下文：

function generateYears() {
    var years = [];
    var currentYear = new Date().getFullYear();
    for (var year = currentYear; year >= 1900; year--) {
        years.push(year);
    }

    $scope.years = years;

    setTimeout(function () {
        $('select').material_select();
    }, 200);
}

这样，物化选择将起作用