Условно формат / стиль внутри ng-repeat

0

Я пытаюсь придумать способ условного форматирования (простой цвет фона) для таблицы html с результатами от контроллера AngularJS. Это, мы надеемся, произойдет во время итераций ng-repeat, поскольку оно работает через элементы в массиве.

То, что я хотел бы сделать, это: всякий раз, когда функция внутри контроллера возвращает true, фон или стиль зеленые, а когда нет, он будет красным.

ПОСМОТРЕТЬ "НАЧАТЬ ВОПРОС" в комментарии для точки ввода.

        <!-- PLAYER STATS TABLE -->
    <div id = "StatsListTable">
    <table border="1" style="width:80%">
    <tr> <!-- TODO: class="tr.pstats" -->
        <th>Character Name</th>
        <th>    
            <div ng-app="KIdash" ng-controller="controller">
            Total Matches: {{TotalMatchesFunc()}} :: {{GreaterWins()}}
            </div>
        </th>
        <th class="green">Wins</th>
        <th class="red">Losses</th>
    </tr>
        <tr ng-repeat="ps in PlayerStats" class = "playerStatTable">
            <td>{{ps.name}}</td>
            <td>{{ps.matches}}</td>

            <!-- BEGIN QUESTION -->
            <!-- IF  {{GreaterWins()}}  make it green -->
            <!-- ELSE                   make it red   -->
            <script type="text/javascript">
            function() {
                if( controller.GreaterWins() )
                {
                    <th class="green">{{ps.wins}}</th>
                } else {
                    <th class="red">{{ps.wins}}</th>
                }
            }
            </script>
            <!-- END IF -->
            <td>{{ps.losses}}</td>
        </tr>
    <table>
    </div>
    <!-- END PLAYER STATS TABLE -->
  • 0
    Почему вы обновили оригинальный вопрос? Я бы сказал, оставьте исходный вопрос без изменений и добавьте правку с решением, если хотите.

1 ответ

2
Лучший ответ

Вы можете сделать это по ng-классу. Что-то вроде ниже:

<tr ng-repeat="ps in PlayerStats" class = "playerStatTable">
      <td>{{ps.name}}</td>
      <td>{{ps.matches}}</td>
      <td ng-class="{'green': GreaterWins(),'red': !GreaterWins() }">{{ps.wins}}</td>                
      <td>{{ps.losses}}</td>
</tr>
  • 0
    Какой отличный ответ! Спасибо вам. Все мои результаты выделены красным, есть ли что-то конкретное, что мне нужно сделать, чтобы гарантировать, что функция GreaterWins () действительно используется правильно? мне нужно ссылаться на него как controller.GreaterWins () в этом контексте?
  • 0
    вам не нужно явно писать controller.GreaterWins() потому что вы не используете контроллер в качестве синтаксиса. GreaterWins() ли GreaterWins() в области действия controller ? и всегда ли он возвращает false ?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню