使用AngularJS进行语义UI搜索下拉列表

Question

我正在尝试使用Semantic UI和AngularJS创建搜索下拉列表来绑定数据。 如果我静态地放置数据，它可以正常工作：

<select class="ui search dropdown">
    <option value="1">Male</option>
    <option value="2">Female</option>
</select>

如果我尝试使用ng-repeat标记内的<option>属性，则显示如下：数据不会显示为下拉列表。

<select class="ui search dropdown" data-ng-model="selectedGender">
    <option data-ng-repeat="gender in genders" value="{{gender.Id}}">{{gender.Text}}</option>
</select>

如果我尝试使用data-ng-options属性，即使下拉插入符号也不会出现！

<select class="ui search dropdown" data-ng-model="selectedGender"
    data-ng-options="gender.Id as gender.Text for gender in genders"></select>

我该怎么做才能解决这个问题？你们有这个问题吗？谢谢你的所有答案！

Answer 1

您好我以这种方式使用Semantic下拉列表

     <div class="field">
        <label for="Role">Role</label>
        <div class="ui selection dropdown">
            <div class="default text">{{user.role}}</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div ng-repeat="role in userRoles" class="item" ng-click="setRole(role.title)">{{role.title}}</div>
            </div>
        </div>
    </div>

但我在课程项目中添加了ng-click指令获取所选项目。

在控制器中，您会找到

$scope.setRole = function (role) {
   $scope.user.role = role;
}; 

Answer 2

app.directive('dropdown', function ($timeout) {
    return {
        restrict: "C",
        scope: { ngModel: '=' },
        link: function (scope, elm, attr) {
            $timeout(function () {
                $(elm).dropdown();
                $('input', elm).on('change', function () {
                    scope.ngModel = $(this).val();
                    scope.$apply();
                });
            }, 0);
        }
    };
});

<div class="ui fluid search selection dropdown" ng-model="data.dropdown">
    <input type="hidden" />
    <div class="default text">Please Select</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="option-1">Option 1</div>
        <div class="item" data-value="option-2">Option 2</div>
    </div>
</div>