Javascript in angular ng-view
Question
This might be a bit to read, but I think it would be fairly confusing without some context. Right now, I have a site that has angular keeping the same header on all my pages, simply including an ng-view to load a specific page's content. My index.html file looks something like this
<!DOCTYPE html>
<html lang="en">
<!-- MY HEADER -->
<div class="ng-view"></div>
<!-- MY FOOTER -->
<!-- Angular scripts -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular-route/angular-route.min.js"></script>
<!-- Angular app script -->
<script src="js/app.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- MY JAVASCRIPT-->
<script src="js/filter.js"></script>
</html>
In one of my views, I am trying to set up a table filter (filtering a list of tournaments based on year). The view file is named archives.html, and currently looks like:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div align="center">
<div class="btn-group">
<button type="button" class="btn btn-filter" data-target="2016">2016</button>
<button type="button" class="btn btn-filter" data-target="2015">2015</button>
<button type="button" class="btn btn-filter" data-target="2014">2014</button>
</div>
</div>
<br>
<div class="table-responsive">
<table class="table table-filter table-hover">
<thead class="thead-inverse">
<tr>
<th>Tournament</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr data-status="2016">
<td>Capilano Junior</td>
<td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour16/event/bcgazonefour165/leaderboard.htm">Results</a></td>
</tr>
<tr data-status="2015">
<td>Point Grey Junior</td>
<td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour16/event/bcgazonefour1611/leaderboard.htm">Results</a></td>
</tr>
<tr data-status="2014">
<td>Shaughnessy Junior</td>
<td><a href="http://bcgazone4.bluegolf.com/bluegolf/bcgazonefour14/event/bcgazonefour144/leaderboard.htm">Results</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
And finally, the javascript code, in js/filter.js:
$(document).ready(function () {
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('tbody tr').css('display', 'none');
$('tbody tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('tbody tr').css('display', 'none').fadeIn('slow');
}
});
});
I am assuming that angular loads all of the scripts I included in my index.html file for each individual view, such that in filter.js, the table in my archives.html view will be successfully located. However, nothing is happening with the filter. Am I wrong in this assumption, or am I being careless with other parts of the javascript?
3 answers
solution1
0 2016-11-21 00:14:43
You have two problems right now. First, you declared the buttons with id="btn_filter" so the event listener should be bound with " # "
$('#btn-filter').on('click', function () {});
Second, "id" should be unique per DOM elements and should not be repeated like you did.
Edit: Based on edits on question, there is a typo with class="btn_filter" and $('.btn-filter') replace underscore with dash.
Edit: Another problem is $('.tbody tr[data-status="' + $target + '"]') replace .tbody with tbody
solution2
0 2016-11-21 00:23:36
could you show us the console log output please? maybe we could help you with more information. You only have to push F12 and click in console.
you can look this article about filtering and sorting in angular.
https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
You can looking for some libraries for this purpose on internet. https://github.com/mattiash/angular-tablesort
This library seems easy to use.
In my opinion, the issue will be any incompatibility between the library and angular, but without the log I can't sure about that. Try both links and coment the results!.
Good luck!
solution3
0 2016-11-21 19:43:11
Managed to find a working solution by making a controller inside my app.js set up specifically for my view, and calling a function I defined in my controller through an ng-click that triggers the javascript for the relevant button. The console logs work now, as I believe it was a problem with trying to access an element before the view had been successfully loaded. Thanks to everyone who helped out.
snippet from archives.html
<div align="center">
<div class="btn-group">
<button type="button" class="btn btn-primary" id="btn2016" ng-click="toggle_year(2016)">2016</button>
<button type="button" class="btn btn-primary" id="btn2015" ng-click="toggle_year(2015)">2015</button>
<button type="button" class="btn btn-primary" id="btn2014" ng-click="toggle_year(2014)">2014</button>
<button type="button" class="btn btn-primary" id="btn2013" ng-click="toggle_year(2013)">2013</button>
<button type="button" class="btn btn-primary" id="btn2012" ng-click="toggle_year(2012)">2012</button>
<button type="button" class="btn btn-primary" id="btn2011" ng-click="toggle_year(2011)">2011</button>
<button type="button" class="btn btn-primary" id="btn2010" ng-click="toggle_year(2010)">2010</button>
</div>
</div>
App.js:
var app = angular.module('zone_4_app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/archives.html',
controller: 'archiveController'
})
// A bunch of other routing
});
app.controller('archiveController', ['$scope', function($scope) {
$scope.toggle_year = function(year) {
console.log('filter button clicked: ' + year);
var $target = year;
var $btn = '#btn' + year;
if ($target != 'all') {
$('.btn-primary').each(function () {
$(this).removeClass('active');
});
$('tbody tr').css('display', 'none');
$('tbody tr[data-status="' + $target + '"]').fadeIn('slow');
$($btn).addClass('active');
console.log('printing out results of year: ' + year);
} else {
$('tbody tr').css('display', 'none').fadeIn('slow');
console.log('no results');
}
}
}]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.