Я пытаюсь реализовать очень простую вещь, используя AngularJS, JQuery и MVC, которые я реализовал в своем раннем проекте. Существует таблица с checkbox
. Заголовок таблицы содержит флажок, и когда я нажимаю флажок, все флажки внутри таблицы будут выбраны и наоборот. Это очень распространенная функция проверки/снятия флажка.Функция выбора флажка не работает
HTML-код:
<div class="panel panel-primary">
<div class="panel-heading">Category List</div>
<div style="padding: 5px">
<div class="col-md-6">
<a class="btn btn-danger" ng-click="removeSelectedRows()" ng-controller="categoryMultiDeleteController"><i class="glyphicon glyphicon-trash"></i>Delete</a>
<a class="btn btn-primary" href="#/category/newcategory"><i class="glyphicon glyphicon-file"></i>New</a>
</div>
<div class="col-xs-10 col-lg-6 col-md-6">
<div class="input-group">
<input type="text" id="searchText" class="form-control pull-right" placeholder="Search for..." ng-model="search_txt">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="text-muted glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
<div class="panel-body">
<div class="table table-responsive">
<table class="table table-striped" id="mytable">
<thead>
<tr>
<th>
<input type="checkbox" id="checkAll" name="checkAll">
</th>
<th>Category Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr dir-paginate="category in categories | filter:search_txt | itemsPerPage: pageSize" current-page="currentPage">
<td style="padding-left: 9px; padding-top: 1px; padding-bottom: 1px; vertical-align: middle">
<div style="height: 35px; overflow: auto;">
<input type="checkbox" id="chkCategoryId" name="chkCategoryId" click="select()"/>
</div>
</td>
<td style="padding: 1px; vertical-align: middle">
<div style="height: 35px; overflow: auto;">{{category.categoryName}}</div>
</td>
<td style="padding: 1px; vertical-align: middle">
<div style="height: 35px; overflow: auto;">{{category.description}}</div>
</td>
<td style="padding: 1px; vertical-align: middle">
<div style="height: 35px; overflow: auto;">
<a class="btn btn-primary" href="#/category/{{category.categoryID}}" title="Edit">
<i class="glyphicon glyphicon-edit"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-center">
<dir-pagination-controls boundary-links="true"
on-page-change="pageChangeHandler(newPageNumber)"
template-url="app/dirPagination.tpl.html"
style="height: 30px; padding: 2px">
</dir-pagination-controls>
</div>
</div>
Javascript является:
<script type="text/javascript">
$(document).ready(function() {
$('#checkAll').change(function() {
if (!$('#checkAll').prop('checked')) {
$('input[type="checkbox"]').each(function() {
$('input[type="checkbox"]').prop('checked', false);
$(this).checked = false;
});
} else {
$('input[type="checkbox"]').each(function() {
$("input[name='chkCategoryId']").prop("checked", true);
$(this).checked = true;
});
}
});
function select() {
alert("ok");
};
});
</script>
выбора/отмены выбора всех функционально работает хорошо, но нажав на один флажок внутри таблицы не работает то, когда я нажмите на флажок, функция `select()` `не вызывает и предупреждение не работает.
Любая помощь будет с благодарностью принята.
нажмите = не существует, используйте OnChange = – Xavjer
Я считаю, OnClick = "" будет работать тоже. – Jerreck
Возможный дубликат [Угловая флажка и ng-click] (http://stackoverflow.com/questions/20290738/angular-checkbox-and-ng-click) – Malkus