AngularJS: ng-repeat и ng-class

У меня проблема с ng-repeat и ng-class. Я хочу применить класс, только если параметр "sel" истинен. Мои данные об этом: people = [{"id":0,"name":"Simone","sel":true},{"id":1,"name":"Maria","sel":false},{"id":2,"name":"Marco","sel":false}]

На моей html-странице у меня есть:

<li ng-repeat="person in people" id="person-{{person.id}}">
        <span ng-class="{person-select: person.sel == 'true'}">{{person.name}}</span>
</li>

Но это не работает.. Где я не прав? Я попробовал с {{person.name}}-{{person.sel}}, и он напечатал «Симона-правда .. Мария-ложь .. Марко-ложь».


angularjs angularjs-ng-repeat ng-class ng-repeat
person simone_s1994    schedule 19.02.2015    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Первая проблема с вашим кодом заключается в том, что вы сравниваете значение boolean со значением string.

true == 'true' // will return false

Вторая проблема заключается в том, что имя класса не заключено в '.

Приведенный ниже код устраняет обе проблемы:

<li ng-repeat="person in people" id="person-{{person.id}}">
    <span ng-class="{'person-select': person.sel}">{{person.name}}</span>
</li>
person Catalin MUNTEANU    schedule 19.02.2015
comment
Да, работает. Для первой проблемы я знаю, но я делаю много попыток. Благодарю вас! :D - person simone_s1994; 19.02.2015

arrow_upward
2
arrow_downward

оберните имя класса ' .

<li ng-repeat="person in people" id="person-{{person.id}}">
        <span ng-class="{'person-select': person.sel == 'true'}">{{person.name}}</span>
</li>
person squiroid    schedule 19.02.2015

arrow_upward
1
arrow_downward

Я знаю, что это старый вопрос, но добавлю к этому. Мне пришлось применить CSS от человека (из списка), а также нужно было добавить класс условно. Вот синтаксис для этого.

<li ng-repeat="person in people" id="person-{{person.id}}">
    <span ng-class="[person.someClass, {'person-select': person.sel}]">{{person.name}}</span>
</li>

Здесь person.someClass — класс из списка, а 'person-select' — условный класс.

person amarmishra    schedule 22.11.2018