Question

我尝试在AngularJS中创建一个非常动态的特殊屏幕。

我在这个屏幕上有一个定义大小的对象：

.item
{
  margin: auto;
  margin-bottom: 10px;
  width: 11vw;
  height: 11vw;
  text-overflow: ellipsis;
  overflow: hidden;
}

根据API的返回，在ng-repeat循环的基础上插入了项目。

  <div class="item"
       ng-click="ctrl.clickFunction()"
       ng-style="{'background-color':ctrl.color }">
    <div class="itemGlobalCode">{{::ctrl.name}}</div>
  </div>

问题是我的项目是圆的并且有最好的渲染我想改变内容的字体大小（这里是ctrl.name），如果这个内容很长以适合容器。

我找到了一些jQuery解决方案，但如果可能的话，我想避免使用它们，如果可能的话，我想要一个纯粹的{{1}解决方案。

你有什么想法吗？

Answer 1

您可以在ng-style上添加表达式：

<强>三元

<div class="itemGlobalCode"
     ng-style="{'font-size': ctrl.name.length > 10 ? '12px' : '14px'}"></div>

方式

控制器

$scope.getFontSize(ctrlName) { if (ctrlName.length > 10) { return '12px'; } return '14px'; };

查看

<div class="itemGlobalCode" ng-style="{'font-size': getFontSize(ctrl.name)}"></div>

加：ng-class

您还可以创建具有不同字体大小的类：

<强> CSS

.itemSmall { font-size: 12px; } .itemBig { font-size: 14px }

查看

<div class="itemGlobalCode" ng-class="{'itemSmall': ctrl.name.length > 10, 'itemBig': ctrl.name.length <= 10}"></div>

Answer 2

您可以使用ng-class指令

<div class="item"
   ng-click="ctrl.clickFunction()"
   ng-class="{'css-class1':condition1, 'css-class2':condition2() }">
<div class="itemGlobalCode">{{::ctrl.name}}</div>

并在您的控制器中：

$scope.condition1 = true;
$scope.condition2 = function(input) {
     // or calculate,do something with the input
    return input.isTrue();
}

Css动态字体大小

2 个答案: