CODEWITHSUNDEEP
javascriptjquery-uiangularjsjquery-ui-button
Danny
Danny

Reputation: 2683

using jQuery UI buttonset in angularjs

Problem statement: show a JQ buttonset for each element in a controller scope array.

So something like this would be logical:

<div ng-repeat='a in algos' mybuttonset>
   <input name='X' id='A'><label for='A'>
</div>

But... In JQ buttonset, if the id of the input/label pairs are not unique, each time the directive calls buttonset() the size of the button grows. eg. If you have 20 elements in 'algos' the buttons are huge.

So how to make the id's unique? I thought {{$index}} inside ng-repeat would work:

<div ng-repeat='a in algos' mybuttonset>
   <input name='X' id='A{{$index}}'><label for='A{{$index}}'>
</div>

But in that case, angular reports the syntax error:

Syntax error, unrecognized expression: [for=A{{$index}}] <div ng-repeat="a in algos" dwbuttonset="" class="ng-scope ui-buttonset">

A very simple example showing the essence of the three cases (normal size, growing buttons, and syntax error) is at this Plunker.

All help and comments appreciated.

Danny

Upvotes: 0

Views: 815

Answers (1)

Liviu T.
Liviu T.

Reputation: 23664

It seems that the for and id attribute values are not set when you call the jquery plugin

Change it to:

.directive('dwbuttonset', function() {
    return function(scope, elm, attrs) {
    setTimeout(function() {
      (elm).buttonset(); 
    },0);
    };
});

This way you call the plugin after the $digest phase of the dom elements.

Upvotes: 3

Related Questions