Я использую Smart-Table с выбором по умолчанию, используя следующую вспомогательную директиву для выполнения выбора, выделение выделенной строки и обратного вызова:
.directive('stSelectRowCustom', function () {
return {
restrict: 'A',
require: '^stTable',
scope: {
row: '=stSelectRowCustom',
callback: '&stSelected' // ADDED THIS
},
link: function (scope, element, attr, ctrl) {
var mode = attr.stSelectMode || 'single';
element.bind('click', function ($event) {
scope.$apply(function () {
ctrl.select(scope.row, mode, $event.shiftKey);
scope.callback(); // AND THIS
});
});
scope.$watch('row.isSelected', function (newValue) {
if (newValue === true) {
element.addClass('st-selected');
} else {
element.removeClass('st-selected');
}
});
}
};
});
Я использую его следующим образом:
<table st-table="displayedRowCollection" st-safe-src="rowCollection" class="table table-striped" >
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection" st-select-row-custom="row" st-select-mode="single">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date:'shortDate'}}</td>
<td>{{row.balance}}</td>
<td>{{row.email}}</td>
</tr>
</tbody>
</table>
Мне нужен st-safe-src
потому что я использую фильтр, а rowCollection
изменения rowCollection
динамически.
Код контроллера:
controller('mainCtrl', ['$scope',
function ($scope) {
$scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
];
$scope.rowCollection[0].isSelected = true;
}
])
Как вы можете видеть выше, я выбираю первую строку: $scope.rowCollection[0].isSelected = true;
и он действительно показан выбранным в таблице, но когда я нажимаю другую строку, первая строка остается выбранной до тех пор, пока я не нажму на нее. Когда я выбираю другую строку (теперь выбираются две строки), а затем выбираем первую, обе они не выбраны. В противном случае директива работает так, как ожидалось.
Там plunkr с рабочим примером: http://plnkr.co/edit/N9jw6B?p=preview
Заранее спасибо.
Обновление 1: Глядя на исходном коде здесь я могу видеть, что смарт-таблица отслеживания last-selected
строки и снимите выделение его на следующем отборе, поэтому, когда я прохожу массивы с предварительно выбранными строками, lastSelected
не определен, и он не может быть невыбранным, По крайней мере, я знаю причину такого поведения, прямо сейчас пытаюсь создать пользовательскую директиву, которая будет проходить по умолчанию, которая должна быть выбрана, любая помощь будет оценена.
if (lastSelected) {
lastSelected.isSelected = false;
}
lastSelected = row.isSelected === true ? row : undefined;
Обновление 2: Хорошо, я нашел решение здесь: qaru.site/questions/5282462/... Он работает, но мне не очень нравится, потому что рассматриваю его как взломать. Все еще работает над более подходящим решением, основанным на директиве, к которой я передам строку, которую следует выбрать по умолчанию.
Утиная резиновая отладка :)
Вот мое решение этой проблемы:
.directive('stDefaultValue', function () {
return {
restrict: 'A',
require: '^stTable',
scope: {
selectedRow: '=stDefaultValue',
stSafeSrc: '='
},
link: function (scope, element, attr, ctrl) {
scope.$watch('stSafeSrc', function(newValue, oldValue) {
if(typeof newValue !== 'undefined'){
ctrl.select(newValue[scope.selectedRow], 'single', false);
}
});
}
};
});
Вы должны использовать его следующим образом:
<table st-table="displayedRowCollection"
st-default-value="1"
st-safe-src="rowCollection"
class="table table-striped" >
В этом примере я передаю только индекс строки, который я хочу выбрать, в моем сценарии этого было достаточно, но, конечно, вы можете передать любой объект javascript и с небольшим усилием сделать его выбранным.
Здесь вы можете увидеть рабочий пример: https://plnkr.co/edit/ca7xLv?p=preview