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?

if you have a js code executing when you view is not loaded and you are binding some event to one or more elements that may exist in the view then those events wont get binded because when you element is not even present in the DOM you can not bind anything to it, So what i would say is try to bind this event after biew loads. Have a look at this stackoverflow.com/questions/30332945/… — Manish
– Manish, Commented Nov 21, 2016 at 5:25

Mouneer · Accepted Answer · 2016-11-21 00:49:19Z

0

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

edited Nov 21, 2016 at 0:49

answered Nov 21, 2016 at 0:14

Mouneer

13.5k3 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

K. Li Over a year ago

sorry, that was a typo. I had tried that earlier, and had forgotten to change that back. Just to clarify, with the "btn btn-filter" class, it still has the same problem.

K. Li Over a year ago

You're completely right. The other '.tbody' lines above and below should also be changed to 'tbody' shouldn't they?

Mouneer Over a year ago

Yes, exactly the same :)

Mouneer Over a year ago

Glad to answer you question. Don't forget to mark my answer as the correct one.

K. Li Over a year ago

unfortunately it's still broken haha

|

K. Li · Accepted Answer · 2016-11-21 19:43:11Z

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');
  }

}

}]);

Collectives™ on Stack Overflow

Javascript in angular ng-view

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related