如何为我的按钮设置字体大小的限制

Question

因此，我试图创建两个按钮，一个减小按钮，一个增大文本的字体大小，它们可以工作，但是我想对它的大小设置一个有限的大小。

这是代码中的内容：

<md-button ng-click="detailsFontSize=detailsFontSize-1" ><i class="glyphicon glyphicon-minus"></i>  </i> - </md-button>
<md-button ng-click="detailsFontSize=detailsFontSize+1" ><i class="glyphicon glyphicon-minus"></i>  </i> + </md-button>

Answer 1

我会为此使用css，但您也可以使用min / max：

<md-button ng-click="detailsFontSize=Math.max(10, detailsFontSize-1)" ><i class="glyphicon glyphicon-minus"></i>  </i> - </md-button>
<md-button ng-click="detailsFontSize=Math.min(30, detailsFontSize+1)" ><i class="glyphicon glyphicon-minus"></i>  </i> + </md-button>

例如，这将字体大小限制为[10，30]。

Answer 2

要限制字体大小，我建议使用如下所示的三元运算符。

<md-button ng-click="detailsFontSize=detailsFontSize == 12 ? detailsFontSize : detailsFontSize - 1" ><i class="glyphicon glyphicon-minus"></i>  </i> - </md-button>
<md-button ng-click="detailsFontSize=detailsFontSize == 24 ? detailsFontSize : detailsFontSize + 1" ><i class="glyphicon glyphicon-minus"></i>  </i> + </md-button>

在这里，我将最小字体大小限制为12，将最大字体大小限制为28。

希望这对您有帮助！