Нажатие на кнопку в строке не выбирает выбранную строку

Question

Нажатие на кнопку в строке не выбирает выбранную строку

0

У меня есть таблица тестовых моделей, где я выделяю выбранный тест с помощью функции selectTest.

Когда я нажимаю кнопку +/expander на tr-tag (row), то tr-tag обертывание кнопки расширения не устанавливается так, как было выбрано.

Как я могу это достичь? -without, используя функцию для ng-щелчка кнопки расширителя -

    <tr ng-repeat-start="person in tests" ng-click='selectTest($index)' ng-class='{selected: $index==selectedRow}'>
        <td>
            <button type="button" class="btn btn-default" ng-if="person.expanded" ng-click="person.expanded = false">-</button>
            <button type="button" class="btn btn-default" ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
        </td>
        <td>{{person.code}}</td>
        <td>{{person.date}}</td>
        <td>{{person.number}}</td>
        <td>{{person.type}}</td>
    </tr>
<tr ng-if="person.expanded" ng-repeat-end="">
// removed for brevity the rest of the table

  $scope.selectTest = function (row) {
            $scope.selectedRow = row;
        };

HelloWorld 06 дек. 2015, в 23:02

Источник

0

Где вы устанавливаете selectedRow как selectedRow вами строку? (Нам понадобится эта информация)
Orel Eraki 06 дек. 2015, в 21:19
0

В контроллере смотрите обновленный код.
HelloWorld 06 дек. 2015, в 21:20
0

Попробуйте изменить тело контроллера на $parent.selectedRow = row;
Orel Eraki 06 дек. 2015, в 21:24
0

@OrelEraki Что именно я должен изменить? Когда я просто заменяю $ scope.selectedRow = row; с вашим кодом, который не имеет смысла.
HelloWorld 06 дек. 2015, в 21:41

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

Теги:

angularjs

2 ответа

Ещё вопросы

Где вы устанавливаете selectedRow как selectedRow вами строку? (Нам понадобится эта информация)
В контроллере смотрите обновленный код.
Попробуйте изменить тело контроллера на $parent.selectedRow = row;
@OrelEraki Что именно я должен изменить? Когда я просто заменяю $ scope.selectedRow = row; с вашим кодом, который не имеет смысла.

celerno · Answer 1 · 2015-12-06T23-53-00.000Z

у вас есть ng-repeat-start но у вас нет ng-repeat-end.

кроме этого, я не уверен, что еще у вас может быть неправильная или какая версия углового вы можете использовать.

Я создал plnkr с вашим кодом здесь: http://plnkr.co/edit/GtlhULgfaldqdKRUuz8B?p=preview

CSS

.selected{
  color:Yellow;
}

JS

angular.module('myApp',[]).controller('TodoCtrl', 
function ($scope) {
  $scope.tests = [];
  $scope.tests.push({
    code: 1,
    date: '1/1/1',
    number: 1,
    type: 'type 1',
    expanded:false
  });
  $scope.tests.push({
    code: 2,
    date: '2/2/2',
    number: 2,
    type: 'type 2',
    expanded:false
  });

  $scope.selectTest = function(row) {

    $scope.selectedRow = row;
  };
});

HTML

<html>

  <head>
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="TodoCtrl">
      <table>
        <tbody>
          <tr ng-repeat-start="person in tests" ng-click="selectTest($index)" ng-class="{selected: $index==selectedRow}">
            <td>
              <button type="button" class="btn btn-default" ng-if="person.expanded" ng-click="person.expanded = false">-</button>
              <button type="button" class="btn btn-default" ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
            </td>
            <td>{{person.code}}</td>
            <td>{{person.date}}</td>
            <td>{{person.number}}</td>
            <td>{{person.type}}</td>
          </tr>
       <tr ng-if="person.expanded" ng-repeat-end="" >
        <td colspan=5>EXPANDED</td>
        </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

да у меня есть ng-repeat-start и -end. Поэтому ваш образец работает. Без -start / -end мой код работает как ваш. Но мне нужно это расширение + выбор строки, когда я нажимаю на саму строку и кнопку. Я обновил свой код.

Synapse · Answer 2 · 2015-12-06T18-35-00.000Z

Не рекомендуется использовать индекс для выделения строки как выбранный, потому что он может измениться, если вы позже отсортируете массив или выполните некоторые динамические изменения в исходном массиве. Вместо этого сделайте следующее:

<tr ng-repeat="person in persons " ng-click='selectPerson(person)' ng-class='{selected: (selectedPersons.indexOf(person.id) > -1)}'>
...
</tr>

$scope.selectedPersons = [];
$scope.selectPerson = function(person){
    $scope.selectedPersons.push(person.id);
}

Если у вас нет идентификатора человека, используйте любой уникальный идентификатор человека

Если вы хотите иметь более короткую версию контроллера класса, выполните следующие действия:

$scope.isSelected = function(person){
    return $scope.selectedPersons.indexOf(person.id) > -1;
}

ng-class='{selected: isSelected(person)}'

Это не имеет ничего общего с моим первоначальным вопросом.
Вы можете использовать мой пример выше, чтобы точно сказать, что вы хотели сделать.