AngularJS 使用语义 UI 下拉菜单进行选择答案

【问题标题】：AngularJS select with Semantic UI dropdownAngularJS 使用语义 UI 下拉菜单进行选择
【发布时间】：2017-06-12 05:46:18
【问题描述】：

我正在做一个项目，我使用 Angular 制作动态网页，并使用语义 UI 来获得外观。

在我遇到这个问题之前，一切都很顺利：我有 2 个下拉菜单，第二个的选项取决于第一个的选定选项。

<div class="cf">
    <div class="col padh_half col_year">
        <label class="fl">Year</label>
        <select ng-change="changeCountries()" ng-options="year for year in years track by year" ng-model="selectedYear" class="ui search dropdown fluid ">
        </select>
    </div>

    <div class="col padh_half col_year">
        <label class="fl">Country</label>
        <select ng-options="country.value for country in countries | orderBy:'value' track by country.id" ng-model="selectedCountry" class="ui search dropdown fluid ">
        </select>
    </div>
</div>

changeCountries，将模型国家更改为当年的国家。在我运行这篇文章之前，一切都很完美：

$(document).ready(function () {
    $('.ui.dropdown').dropdown();
})

当我现在尝试更改第一个下拉菜单时，第二个下拉菜单不再随之更改。虽然函数 changeCountries 被调用。我现在该怎么办？

【问题讨论】：

一般来说，当您拥有 javascript 库时，您还应该为它们设置一组指令。例如，Bootstrap 有Angularstrap 或UI Bootstrap。我不确定 SemanticUI 有哪些角度指令库。
AngularJS 和 SemantiUI 库都尝试读/写 DOM，正如 @Stryner 所指出的，一个库的 DOM 修改会破坏另一个库。
尝试调用 $('.ui.dropdown').dropdown();每次更改后看看会发生什么，最好更准确地指定要使用语义 ex 初始化的元素。 $('.ui.dropdown.second_celect').dropdown();

标签： javascript jquery angularjs

【解决方案1】：

这对我有用！ :)

http://angularify.github.io/angular-semantic-ui/

【讨论】：