CODEWITHSUNDEEP
angularjssemantic-ui
napfernandes
napfernandes

Reputation: 1359

Semantic UI search dropdown with AngularJS

I'm trying to create a search dropdown using Semantic UI and AngularJS to bind the data. If I put the data statically, it works fine:

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

enter image description here

If I try to use the ng-repeat attribute inside <option> tag, it appears like that below: the data doesn't appear like a dropdown.

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

enter image description here

And if I try to use the data-ng-options attribute, even the dropdown caret doesn't appear!

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

enter image description here

What can I do to solve this? Do you guys already have this problem? Thanks for all answers!

Upvotes: 3

Views: 4366

Answers (2)

Eray Turan
Eray Turan

Reputation: 11

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>

Upvotes: 1

Farandole
Farandole

Reputation: 551

Hi I use Semantic dropdown this way

     <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>

but I add a ng-click directive in my class item to get the selected item.

In the controller, you will find

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

Upvotes: 2

Related Questions