У меня есть таблица тестовых моделей, где я выделяю выбранный тест с помощью функции 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;
};
у вас есть 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>
Не рекомендуется использовать индекс для выделения строки как выбранный, потому что он может измениться, если вы позже отсортируете массив или выполните некоторые динамические изменения в исходном массиве. Вместо этого сделайте следующее:
<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)}'
selectedRow
какselectedRow
вами строку? (Нам понадобится эта информация)