当标题在 ng-repeat 中有一定长度时，如何给出特定的 class？

Question

我无法让它工作。

<div ng-repeat="title in titles">
   <h1>{{title.name}}}</h1>
</div>

我想做的是获取标题的长度。所以假设如果标题有 10 个字母，我想给它一个特定的 class.

我试过这个：

<h1 ng-class="title.name.length >= 10 ? 'specific-class'">{{title.name}}}</h1>

（在这里找到的，顺便说一句：angular ng-class if-else expression）。

但是没有用，很明显我做错了什么。

Answer 1

在这种情况下，您不需要三元运算符。可能是以下内容：

<h1 ng-class="{'specific-class': title.name.length >= 10}">{{title.name}}</h1>

JSFiddle demo

Answer 2

您可以使用最适合这种情况的terniary-operator。

您可以根据条件的 true 或 false 结果添加 class。

试试这个，

<h1 ng-class="((title.name.length) >= 10) ? 'specific-class' : 'other-class'">{{title.name}}}</h1>

这一次如果条件满足则添加specific-class，如果条件不满足则添加other-class

这是一个例子，

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>

.specific-class {
    background-color:coral;
    padding:40px;
    font-family:Verdana;
}
</style>
<body ng-app="">

<div ng-class="(15 >= 10) ? 'specific-class' : ''">
  <h1>Welcome Home!</h1>
  <p>I like it!</p>
</div>

</body>
</html>

请运行以上片段

当标题在 ng-repeat 中有一定长度时，如何给出特定的 class？

How to give a specific class when title has certain length in ng-repeat?

angularjs

ng-class

JSFiddle demo