Camille Chambefort Camille Chambefort - 3 years ago 237
AngularJS Question

Semantic UI dropdown initialization inside an ng-repeat

So, here's the thing : I have an ng-repeat allowing me to create multiple lines each containing a dropdown from Semantic UI.

Thing is, Semantic UI Dropdown needs to be initialized with the following code :

$('.ui.dropdown')
.dropdown()
;


Unfortunately, ng-repeat creates his own scope in which the dropdown isn't initialized anymore. How could I inject this code into ng-repeat's ? Or do any of you have any tip to fix it by another way ?

The fact is, when you have an ng-repeat inside a select in the option, it works perfectly, but when you do an ng-repeat outside of the dropdown and therefore copying it multiple times, the multiple dropdowns you'll have won't work at all.

Here is an example of what I need to do in a JSFiddle : https://jsfiddle.net/bttj1apa/2/

Answer Source

You need to put the sematic ui initialization inside a directive, it will get initialized. Below is demo for the same!

Directive:

myApp.directive("dropdown", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      element.dropdown();
    }
  }
})

JSFiddle Demo

I am assuming you are not using a proper angular plugin for implementing semantic-ui, mostly what will happen is.

  1. Changes in your controller or directive will not be reflected in the output HTML.

  2. Some errors may get thrown repeatedly.

To save you the hassle of this please go for some of the angular plugins for semantic UI

Here is the details for using the dropdown using Angular Semantic UI Dropdown

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download