Блог

Я работаю с angularjs и хочу использовать метод ‘buttonset’ jQueryUI. Я столкнулся со следующей проблемой: сначала вот мой код :

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-шаблоном, 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">
  

потому что это «своего рода» то, что я хочу, но безуспешно.

 <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

Директива ng-repeat-start работает так же, как ng-repeat , но будет повторять весь HTML-код (включая тег, для которого он определен) вплоть до конечного HTML-тега, в который помещен ng-repeat-end .