0
, так что у меня возникает странная проблема с угловатым основанием для приложений. (весь код ниже)странная проблема с угловым щелчком - фильтр и вложенные клики по таблице
У меня есть таблица данных с объектом фильтра (визуальная панель элементов формы, связанная с одним объектом области) на странице (все внутри одного контроллера). Это включает в себя select из трех вариантов фильтрации таблицы по завершенному статусу (все, полные, неполные);
Каждая строка содержит ng-repeat ed и имеет ng-click, чтобы выделить строку (для удобства чтения). Затем я использовал в последнем td каждой строки стилизованный флажок, чтобы отметить строку как «полную».
Когда я загружаю страницу и устанавливаю флажок «Полный», я могу видеть, что моя служебная функция обновляет сервер и локальный файл websql. если я выберу флажок фильтра (скажем, направление) и нажмите «полный» флажок, он будет работать;
Он перестает работать, когда я фильтрую список, используя «полный» фильтр, выберите drop down; Я вижу, что флажок установлен, и дайджест объема, но функция проверки никогда не вызывается; есть идеи?
КОД:
//CONTROLLER
.controller('tableShow', function($scope, $state, $http, dataService, $filter) {
$scope.list = {};
$scope.data = function() {
console.log('filter'); //<-- SHOWS IN CONSOLE ON HIGHLIGHT OR CLICK OF COMPLETE REGARDLESS OF FUNCTION BEING CALLED;
return $filter('filter')(Object.values(dataService.data), $scope.list);
};
$scope.headers = ["date", "t_id", "type", "code", "desc", "io"]; // used to only show required headers
// LIST MANAGEMENT
$scope.sortedBy = 'date';
$scope.reversed = true;
$scope.setSort = function(col) {
$scope.reversed = ($scope.sortedBy == col ? !$scope.reversed : false);
$scope.sortedBy = col;
};
//MISC FN
$scope.highlight = function(e) {
var row = e.target.tagName === 'tr' ? e.target : utils.getClosest(e.target, 'tr'),
table = utils.getClosest(row, 'tbody'),
preHl = table.querySelectorAll('tr[highlight]'),
highlighted = row.hasAttribute('highlight');
if (preHl.length > 0) {
for (var i = preHl.length - 1; i >= 0; i--) {
preHl[i].removeAttribute('highlight');
}
}
if (!highlighted)
row.setAttribute('highlight', '');
};
$scope.unCheck = function(e) {
console.log(e);
var input = e.target,
lastVal = input.parentNode.checked,
model = input.getAttribute('ng-model').split('.');
console.log(input.value, input.parentNode.checked);
if (input.value !== input.parentNode.checked) {
input.parentNode.checked = input.value;
return;
}
input.checked = false;
input.parentNode.checked = '';
if (model.length == 1)
delete $scope[model[0]];
else if (model.length == 2)
delete $scope[model[0]][model[1]];
else if (model.length == 3)
delete $scope[model[0]][model[1]][model[2]];
else
alert('There was an error matching the data model!');
};
$scope.complete = function(e, row) {
e.preventDefault();
e.stopPropagation();
// added the above as thought the click might be bubbling to highlight
console.log('SUBMITTING', e, row); // does not show if complete is set
var input = e.target,
lastVal = input.parentNode.checked,
newVal = input.value,
sub = input.checked ? 1 : 0,
_id = angular.copy(row.id), // thought this may be the problem but didnt help;
data = {
update: {
data: [{
id: _id,
completed: sub
}]
}
};
input.disabled = true;
sendData(data)
.then(updated, failed);
function updated() {
if (input.value !== input.parentNode.checked) {
input.parentNode.checked = input.value;
} else {
input.checked = false;
input.parentNode.checked = '';
}
row.completed = sub;
input.disabled = false;
}
function failed() {
if (input.value == input.parentNode.checked) {
input.parentNode.checked = input.value;
} else {
input.checked = false;
input.parentNode.checked = '';
}
input.disabled = false;
}
};
});
HTML
<section class="grid-content vertical">
<form name="Form" class="grid-block vertical" ng-submit="">
<fieldset name="ListSelect">
<legend>Filter</legend>
<div class="grid-block wrap">
<div class="grid-content small-3">
<div class="checker grid-block small-up-2">
<input id="IN" name="io" type="radio" ng-model="list.io" value="IN" ng-click="unCheck($event)">
<label for="IN" onclick="" class="grid-content noscroll">
<span class="corners"></span> IN
</label>
<input id="OUT" name="io" type="radio" ng-model="list.io" value="OUT" ng-click="unCheck($event)">
<label for="OUT" onclick="" class="grid-content noscroll">
<span class="corners"></span> OUT
</label>
<span></span>
</div>
</div>
<div class="grid-content small-3">
<div class="checker grid-block small-up-2">
<input id="TYPE1" name="type" type="radio" ng-model="list.type" value="type1" ng-click="unCheck($event)">
<label for="TYPE1" onclick="" class="grid-content noscroll">
<span class="corners"></span> TYPE1
</label>
<input id="TYPE2" name="type" type="radio" ng-model="list.type" value="type2" ng-click="unCheck($event)">
<label for="TYPE2" onclick="" class="grid-content noscroll">
<span class="corners"></span> TYPE2
</label>
<span></span>
</div>
</div>
<div class="grid-content small-3">
<select name="complete" ng-model="list.complete">
<option value="" selected>All</option>
<option value="1">Completed</option>
<option value="0">InComplete</option>
</select>
</div>
</div>
</fieldset>
<aside class="small-12 grid-block corners large vertical">
<div class="grid-block data ddLine">
<div class="grid-content data">
<table class="responsive" id="inventoryList">
<thead>
<th ng-repeat="v in headers" ng-hide="(v == 'type' && list.type) ">
<label ng-click="setSort(v)">
{{v | addSpace}}
<i class="fa fa-fw" ng-class="{'fa-sort-down': reversed && v == sortedBy, 'fa-sort-up': !reversed && v == sortedBy, 'fa-sort': v != sortedBy}"></i>
</label>
</th>
</thead>
<tbody>
<tr class="anim-4" ng-click="highlight($event);" ng-repeat="r in data() | orderBy:sortedBy:reversed" ng-class="r.disabled == 1 ? 'disabledRow' : ''">
<td ng-repeat="v in headers" class="nowrap" ng-hide="(v == 'type' && list.type)">
{{ v == 'date' ? (r[v] | dateShow) : (r[v] || '-')}}
</td>
<td>
<div class="checker grid-block small-up-2">
<input id="complete-{{r.id}}" type="checkbox" name="complete" ng-model="r.complete" ng-true-value="1" ng-false-value="0" ng-click="completed($event, r);">
<label for="complete-{{r.id}}" class="grid-content noscroll">
<span class="corners"></span>
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</aside>
</form>
</section>
ПРИМЕЧАНИЯ:
- нет JQuery не существует в этом приложении
- Я знаю, что добавление атрибутов DOM в контроллер считается плохой практикой (я уверяю вас, что это не проблема, я проверил)
- Мне нужно использовать
Object.values, так как моя структура данных не соответствует структуре объектов объектов углов ; (моя собственная ошибка слишком поздно до изменение!); - Я отрезал нерелевантный код и классы, чтобы уменьшить размер этого вопроса;
EDIT Подумав, я думаю, что это может быть вызвано фильтрацией списка & модели для «полной» быть связан со строкой; вкратце меняя модель строки, щелкнув по полному флажку, заставляет фильтр списка отбрасывать эту строку до вызова функции; Хотя я не уверен в этом, так как я все еще изучаю угловые канаты
http://stackoverflow.com/help/mcve –
Мои глаза жалят. Ваш код находится в миллионах миль от Угловых лучших практик ... Я не могу это переварить! – Vi100
Конструктивная критика была бы полезной, в отличие от общего «хорошо, что не так» или «heres link!». @ Vi100 вы имеете в виду js или html? –