Как указать определенный класс, когда заголовок имеет определенную длину в ng-repeat?

Я не могу заставить это работать.

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

Что я хочу сделать, так это получить длину заголовка. Допустим, если в названии 10 букв, я хочу присвоить ему определенный класс.

Я пробовал это:

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

(кстати, нашел его здесь: angular ng-class if-else expression).

Но это не сработало, так что я явно делаю что-то не так.


angularjs ng-class
person Siyah    schedule 20.01.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В этом случае вам не нужен тернарный оператор. Это может быть следующее:

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

демонстрация JSFiddle

person Mistalis    schedule 20.01.2017
comment
Спасибо чувак. Дело в том... что он не добавляет класс к моему имени класса. Что я делаю неправильно? Нет, у него просто class=ng-binding, но новый класс не добавляется... - person Siyah; 20.01.2017
comment
@Siyah Я не понимаю, в чем твоя проблема. Не могли бы вы предоставить свой реальный код, разветвив мою Fiddle? - person Mistalis; 20.01.2017
comment
@Siyah Рада, что помогла! :-) - person Mistalis; 20.01.2017

arrow_upward
1
arrow_downward

Вы можете использовать terniary-operator, который лучше всего подходит для таких ситуаций.

Вы можете добавить класс на основе true или false результата условия.

Попробуй это,

<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>

Пожалуйста, запустите приведенный выше фрагмент

person Sravan    schedule 20.01.2017
comment
Та же проблема, что и выше. Он не добавляется в мой класс... Похоже, он не работает, но, вероятно, в этом случае что-то не так в моем коде. Грр - person Siyah; 20.01.2017
comment
добавьте мой код и проверьте, добавляется ли other-class при неудачном условии. - person Sravan; 20.01.2017
comment
Код выше работал. Спасибо друг. Я проголосовал за ваш ответ! - person Siyah; 20.01.2017
comment
@Siyah, рад помочь тебе. - person Sravan; 20.01.2017