Проблемы при попытке применить класс CSS к строкам

Question

Проблемы при попытке применить класс CSS к строкам

0

У меня есть эта таблица:

<table id="mytable" st-safe-src="dataSetREST" st-table="displayed" class="table table-responsive portlet-body panel-body">
                    <thead>
                        <tr >
                            <th >A</th>
                            <th >B</th>
                            <th >C</th>
                            <th >D</th>
                            <th >E</th>
                            <th >F</th>
                            <th >G</th>
                            <th >H</th>
                        </tr>
                    </thead>

                    <tbody data-ng-dblclick="scrollTo()">

                        <tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-class="{'selected':$index == selectedRow}" data-ng-click="setClickedRow($index)">
                            <td data-ng-click="$parent.selData(row);">{{$index}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.asd}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.sad}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.dsa}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.das}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.sda}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.ads}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.etc}}</td>
                        </tr>
                    </tbody>
                </table>

Мне нужно применить цвет фона в выбранной строке. В контроллере я добавил следующее:

$scope.selectedRow = null;
$scope.setClickedRow = function(index){
     $scope.selectedRow = index;
}

Он должен работать, поскольку в data-ng-click я отправляю индекс методу, но он не вводил метод (или, по крайней мере, не печатал консоль.log(), помещенную внутри). Здесь класс css:

.selected {
    background-color: #67BBED;
}

Noble 06 июль 2015, в 11:32

Источник

Теги:

html

angularjs

css

2 ответа

0

Вы можете использовать ternary operator в выражениях. Просто попробуйте

<tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-click="selectedRow = $index" data-ng-class="$index == selectedRow ? 'selected' : ' '" >

Я думаю, что ваш ng-click работает позже, и вы сначала применяете класс.

Vineet 06 июль 2015, в 06:58

0

Спасибо, но это не сработало полностью, так как все выбранные строки сохраняются.
Noble 06 июль 2015, в 09:29
0

Вы получаете какую-либо ошибку в консоли?
Vineet 06 июль 2015, в 09:30
0

Я просто не очень хорошо объяснил свой комментарий, так как вы предлагаете изменить его цвет, но когда я выбираю другой ряд, оба сохраняют цвет фона. Нет ошибок консоли.
Noble 06 июль 2015, в 09:32
0

Проверьте отредактированный ответ
Vineet 06 июль 2015, в 09:45
0

Работал так же, как предыдущий на моем приложении
Noble 06 июль 2015, в 10:10

Показать ещё 3 комментария

Ещё вопросы

Спасибо, но это не сработало полностью, так как все выбранные строки сохраняются.
Вы получаете какую-либо ошибку в консоли?
Я просто не очень хорошо объяснил свой комментарий, так как вы предлагаете изменить его цвет, но когда я выбираю другой ряд, оба сохраняют цвет фона. Нет ошибок консоли.
Проверьте отредактированный ответ
Работал так же, как предыдущий на моем приложении

Taha Amine Zeghbib · Accepted Answer · 2015-07-06T08-29-00.000Z

проверьте эту скрипку, она отлично работает http://jsfiddle.net/linkolen/tq31h4bw/#base

angular.module('myApp', []);

function TestCtrl($scope) {
    $scope.selectedRow = null;
    $scope.displayed = [{asd:3},{asd:3},{asd:3},{asd:3},{asd:3},{asd:3}]
$scope.setClickedRow = function(index){
     $scope.selectedRow = index;
}
}

.selected {
    background-color: #67BBED;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
<table id="mytable" st-safe-src="dataSetREST" st-table="displayed" class="table table-responsive portlet-body panel-body">
                    <thead>
                        <tr >
                            <th >A</th>
                            <th >B</th>
                            <th >C</th>
                            <th >D</th>
                            <th >E</th>
                            <th >F</th>
                            <th >G</th>
                            <th >H</th>
                        </tr>
                    </thead>

                    <tbody data-ng-dblclick="scrollTo()">

                        <tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-class="{'selected':$index == selectedRow}" data-ng-click="setClickedRow($index)">
                            <td data-ng-click="$parent.selData(row);">{{$index}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.asd}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.sad}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.dsa}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.das}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.sda}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.ads}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.etc}}</td>
                        </tr>
                    </tbody>
                </table>
 <div>

Это странно, но в моем проекте это просто не входит в метод.
если вы заметили, у меня нет этого в моей скрипке data-ng-click = "$ parent.selData (row);" ng-click на элементах таблицы td может быть причиной проблем
@Nobie, ты пробовал мой отредактированный ответ
Я пытался удалить ng-клики и ng-dbl-клики, но продолжаю не работать, и консоль не печатала console.log по методу, я знаю, что это довольно странно, но мне действительно нужно это работать, есть какие-то идеи, чтобы избежать моего приложение для ввода метода?
Не могли бы вы создать скрипку или PLNKR вашего кода, чтобы я мог помочь вам
Поскольку это корпоративный код, я думаю, что не могу предоставить, но если вы хотите что-то конкретное, просто спросите
проверьте предоставленную мне скрипку. В чем разница между моим кодом и вашим? почему мой работает, а ваш нет
Ну, у меня есть больше контента в моем контроллере, но он просто не имеет доступа к методу. Я буду проверять различия.
попробуйте изменить свои data-ng-click = "setClickedRow ($ index)" TO data-ng-click = "$ parent.setClickedRow ($ index)" и data-ng-class = "{'selected': $ index == $ parent.selectedRow} "
Спасибо за помощь и терпение, правда.
Если вы все еще там, знаете какой-нибудь способ очистить выделение при использовании нумерации страниц? У меня проблемы с достижением и я не чувствую себя в моде, чтобы опубликовать еще один вопрос.
попробуйте сделать это на странице change $ scope.selectedRow = null;