CODEWITHSUNDEEP
javascriptjqueryangularjsjquery-ui
BastienSander
BastienSander

Reputation: 1838

ng repeat and buttonset

I am working with angularjs and want to use the 'buttonset' method of JqueryUI. I am in front of the following problem: First here is My code :

HTML

<fieldset class="ui-buttonset" button-set>
    <legend>Choose your tag:</legend>
       <p>
          <span ng-repeat="tag in tagList">
             <input type="radio" id="t-{{ tag.name }}" value="{{ tag.name }}" name="tag"/>
             <label for="t-{{ tag.name }}" >{{ tag.name }}</label>
          </span>
      </p>
</fieldset>

JS

app.directive('buttonSet', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs){
            $timeout(function(){
                $element.buttonset();
            },0);
        }
    }
}]);

My problem is with the HTML template, the UI API needs my html to look like :

<p>
    <input type="radio" id="tag1" value="tag1" name="tag" />
    <label for="tag1">tag1</label>
    <input type="radio" id="tag2" value="tag2" name="tag" />
    <label for="tag2">tag2</label>
</p>

Without the 'span' element you can see to make the ng-repeat

I tried :

<ng-repeat="tag in tagList">
    <input type="radio" id="tag1" value="tag1" name="tag" />
    <label for="tag1">tag1</label>
    <input type="radio" id="tag2" value="tag2" name="tag" />
    <label for="tag2">tag2</label>
</ng-repeat="tag in tagList">

because this is the 'kind of' what I want but without success.

Upvotes: 1

Views: 85

Answers (1)

Srinath Mandava
Srinath Mandava

Reputation: 3462

<input ng-repeat-start="tag in tagList" type="radio" id="t-{{ tag.name }}" value="{{ tag.name }}" name="tag"/>
<label ng-repeat-end for="t-{{ tag.name }}" >{{ tag.name }}</label>

Use ng-repeat-start

The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.

Upvotes: 3

Related Questions