using jQuery UI buttonset in angularjs

Question

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

Liviu T. · Accepted Answer · 2013-01-18 20:56:49Z

3

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.

edited Jan 18, 2013 at 20:56

answered Jan 18, 2013 at 20:45

Liviu T.

23.7k10 gold badges64 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

using jQuery UI buttonset in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related