Highlighting Semantic UI with AngularJS
I am trying to create a search dropdown with Semantic UI and AngularJS for data binding. 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>
If I try to use an attribute ng-repeat
inside a tag <option>
it looks like this: no data is displayed like a dropdown menu.
<select class="ui search dropdown" data-ng-model="selectedGender">
<option data-ng-repeat="gender in genders" value="{{gender.Id}}">{{gender.Text}}</option>
</select>
And if I try to use the attribute data-ng-options
, even the caret dropdown doesn't show up!
<select class="ui search dropdown" data-ng-model="selectedGender"
data-ng-options="gender.Id as gender.Text for gender in genders"></select>
What can I do to fix this problem? Do you guys already have this problem? Thanks for all the answers!
source to share
Hi i am using 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 am adding a directive ng-click
to my class to get the selected item .
In the controller you will find
$scope.setRole = function (role) {
$scope.user.role = role;
};
source to share
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>
source to share