добавить данные таблицы <td> только в одну строку в ng-repeat

0

в таблице с ng-repeat можно добавить ячейку только в одну строку?

в моем коде:

<tbody>
          <tr ng-repeat="user in users ng-click="selectUser(user)">
            <td>{{user.username}}</td>
            <td><input type="text"....></td>
            <td><input type="checkbox"...></td>
            <td><input type="submit" ...  ng-show="user==selectedUser" /></td>
          </tr>
        </tbody>

в этом коде я хочу, чтобы последний td отображался только в выбранной строке и не влиял на другие строки, возможно ли это? или это вещь JS или CSS?

Теги:
angularjs-ng-repeat
angularjs-ng-show

3 ответа

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

Во-первых, вы должны использовать контроллер в качестве синтаксиса, он автоматически помещает все в контроллер под 1 объект, что может вызвать проблемы с Angular. Но я не думаю, что проблема здесь.

Выбранный вами пользователь может быть равен выбранномуUser, но если они не указывают на одну и ту же ссылку, они не смогут. Если имена пользователей различны, я бы изменил ng-show = "user.username == selectedUser.username", и это должно работать нормально.

  • 0
    проблема не в контроллере, области или методе, проблема в директиве ng-repeat, которая применяет столбец ко всем строкам, а не только к выбранной.
  • 0
    Тогда вы уверены, что ng-show отсутствует в элементе <td>? То, как код написан там, столбец всегда будет там, но поле ввода будет отображаться только в том случае, если выбрана строка.
Показать ещё 11 комментариев
1

Возможно, кажется, что ваш код в основном правильный, но вы используете selectedUser как функцию и как объектное представление пользователя. Возможно, ваша функция будет называться selectUser которая установит $scope.selectedUser. ng-show="user == selectedUser" будет делать с тех пор.

Я лично не большой поклонник наличия условий в представлении, поэтому у меня будет функция в контроллере, которая выполняет сравнение и возвращает true или false.

function isSelectedUser(user) {
    return user == $scope.selectedUser;
}

то вы можете просто использовать ng-show="isSelectedUser(user)"

  • 0
    Да, правильно, функция selectUser (пользователь), теперь ng-show работает нормально. но при обновлении моя таблица имеет 3 столбца, и при нажатии на любую строку появляется 4-й. Я хочу, чтобы 4-й столбец отображался только в выбранной строке, а не во всей таблице с пустым содержимым
  • 0
    Я не уверен, что понимаю, какая у вас проблема сейчас. Код должен показывать кнопку отправки только в строке, которую вы нажали, не так ли?
1

Используйте JQuery для добавления <td> в выбранную строку <tr>. :nth-child() - это простой способ выбрать строку.

var selectedRow = 2;
$('tbody tr:nth-child('+ selectedRow +')').append('<td><input type="submit" /></td>');
  • 0
    какой угловой путь?
  • 1
    Алекс отвечает угловым путем. Вы также сказали, что «я хочу, чтобы четвертый столбец отображался только в выбранной строке, а не во всей таблице с пустым содержимым». Это означает, что в ваших строках будет разное количество ячеек - в некоторых из них будет 3, а в других - 4. Я почти уверен, что таблицы со строками с разным количеством ячеек <td> невозможны.
Показать ещё 4 комментария

Ещё вопросы

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