Semantic UI search dropdown with AngularJS

Question

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!

I'm not able to replicate your last example (which is the correct way to do it by the way). plnkr.co/edit/UCfdrQ0l9CuRdzKXwhGE?p=preview Are you able to create an example that shows the issue? — Matthew Green
– Matthew Green, Commented Dec 1, 2014 at 20:19
@Matthew, the problem is not with the dropdown, but with the way that Semantic UI renderizes the element, you know? I'll create a live example about — napfernandes
– napfernandes, Commented Dec 1, 2014 at 20:34
perpahs adding a track by like this data-ng-options="gender.Id as gender.Text for gender in genders track by gender.Id "> gets the job done... try it — Victor
– Victor, Commented Oct 4, 2017 at 15:32

Farandole · Accepted Answer · 2015-03-04 20:52:29Z

2

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

answered Mar 4, 2015 at 20:52

Farandole

5612 gold badges8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Meyer · Accepted Answer · 2017-01-02 17:26:25Z

1

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>

edited Jan 2, 2017 at 17:26

Meyer

1,7327 gold badges22 silver badges20 bronze badges

answered Jan 2, 2017 at 15:55

Eray Turan

112 bronze badges

Collectives™ on Stack Overflow

Semantic UI search dropdown with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related