javascript - ng 重复和按钮集

Question

我正在使用 angularjs 并想使用 JqueryUI 的 'buttonset' 方法。我面临以下问题:首先是我的代码:

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);
        }
    }
}]);

我的问题是 HTML 模板，UI API 需要我的 html 看起来像:

<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>

如果没有 'span' 元素，您可以看到生成 ng-repeat

我试过了:

<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">

因为这是我想要但没有成功的“那种”。

Answer 1

<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>

使用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.