Question

是否可以将单选按钮的文本转换为锚点？

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>

Answer 1

在Primeng中没有直接实现此目标的简便方法。但是您需要为此做一些技巧。可能这不是最佳解决方案，但可以满足您的目的。这只是一种解决方法。

以Primeng单选按钮为例。

我在html中添加了自定义类 customeRadio ，并且还添加了<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选择器属性隐藏所有标签内容：

.customeRadio label{
    display:none;
}

仅此而已！

Answer 2

不需要CSS，只需将标签设置为空字符串并添加锚点即可。

Primeng p-radioButton-文本作为锚点

2 个答案: