Блог

Возможно ли преобразовать текст переключателя в привязку?

https://www.primefaces.org/primeng/#/radiobutton

В этом случае вариантом 1 может быть ссылка, по которой пользователь нажимает, чтобы открыть новое окно браузера для просмотра страницы.

Это не сработает:

  <p-radioButton name="operation_group"  [(ngModel)]="modelcol" tabindex=2 inputId="opt1">
 <a href="https://www.thesitewizard.com/">Operation</a> </p-radioButton>
  

Не существует простого способа напрямую реализовать это в Primeng. Но для этого вам нужно выполнить трюк. Возможно, это было бы не лучшим решением, но оно послужит вашей цели. Это всего лишь обходной путь.

Берем пример с переключателем Primeng.

Я добавил пользовательский класс customeRadio в html, а также добавил <a> тег, аналогичный значению параметра.

 <div class="ui-g-12 customeRadio">
    <p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1">
    </p-radioButton><a href="">Option 1</a>
  </div>
  <div class="ui-g-12 customeRadio">
    <p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2">
    </p-radioButton><a href="">Option 2</a>
  </div>
  <div class="ui-g-12 customeRadio">
    <p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3">
    </p-radioButton><a href="">Option 2</a>
  </div>
  

Теперь в файле styles.css или там, где вы хотите написать css для него.

Просто скройте все содержимое метки, используя свойство css selector:

 .customeRadio label{
    display:none;
}
  

Вот и все!

Не требуется css, просто установите label в пустую строку и добавьте привязку.