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

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

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

Как я могу это достичь? -без с использованием функции для нг-нажатием кнопки расширителя -

<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; 
     };

источник

2015-12-06 HelloWorld

Где вы устанавливаете 'selectedRow' в качестве выбранной вами строки? (Нам понадобится эта информация) –

В контроллере см. Обновленный код. – HelloWorld

Попробуйте изменить тело контроллера на '$ parent.selectedRow = row;' –

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

<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); 
}

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

Если вы хотите иметь более короткую версию контроллера класса это сделать:

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

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

источник

2015-12-06 21:22:12 Synapse

Это не имеет никакого отношения к моему первоначальному вопросу. – HelloWorld

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

у вас есть ng-repeat-start, но не имеют ng-repeat-end.

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

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

CSS

.selected{ 
    color:Yellow; 
}

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>

источник

2015-12-07 01:49:33 celerno

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

@HelloWorld проверить обновление. – celerno

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

ответ

Смежные вопросы