角度ng-view中的Javascript

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. 现在，我有一个站点，它的角度在所有页面上保持相同的标题，只是包含一个ng-view来加载特定页面的内容。 My index.html file looks something like this 我的index.html文件看起来像这样

<!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: 该视图文件名为archives.html，当前看起来像：

<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: 最后是js / filter.js中的javascript代码：

$(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. 我假设对每个单独的视图都按角度加载了index.html文件中包含的所有脚本，因此在filter.js中，archives.html视图中的表将被成功定位。 However, nothing is happening with the filter. 但是，过滤器没有任何反应。 Am I wrong in this assumption, or am I being careless with other parts of the javascript? 我在这个假设中是错误的，还是我对javascript的其他部分不注意？

Answer 1

You have two problems right now. 您现在有两个问题。 First, you declared the buttons with id="btn_filter" so the event listener should be bound with " # " 首先，您使用id =“ btn_filter”声明了按钮，因此事件监听器应与“ ＃ ”绑定

$('#btn-filter').on('click', function () {});

Second, "id" should be unique per DOM elements and should not be repeated like you did. 其次，“ id”对于每个DOM元素应该是唯一的，并且不应像您一样重复。

Edit: Based on edits on question, there is a typo with class="btn_filter" and $('.btn-filter') replace underscore with dash. 编辑：根据问题的编辑，有一个错字，带有class="btn_filter"和$('.btn-filter')用下划线代替下划线。

Edit: Another problem is $('.tbody tr[data-status="' + $target + '"]') replace .tbody with tbody 编辑：另一个问题是$('.tbody tr[data-status="' + $target + '"]')用tbody替换.tbody

Answer 2

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. 您只需要按F12并在控制台中单击即可。

you can look this article about filtering and sorting in angular. 您可以查看这篇有关角度过滤和排序的文章。

https://scotch.io/tutorials/sort-and-filter-a-table-using-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 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. 在我看来，问题将是库和angular之间的任何不兼容，但是如果没有日志，我无法确定。 Try both links and coment the results!. 尝试两个链接并注释结果！

Good luck! 祝好运！

Answer 3

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. 通过在app.js内专门为我的视图设置一个控制器，然后通过ng-click调用我在控制器中定义的函数来触发工作按钮，从而触发javascript。 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 来自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: 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');
  }

}

}]); }]）;

角度ng-view中的Javascript

问题描述

3 个解决方案

解决方案1
0 2016-11-21 00:14:43

解决方案2
0 2016-11-21 00:23:36

解决方案3
0 2016-11-21 19:43:11

角度ng-view中的Javascript

问题描述

3 个解决方案

解决方案1 0 2016-11-21 00:14:43

解决方案2 0 2016-11-21 00:23:36

解决方案3 0 2016-11-21 19:43:11

解决方案1
0 2016-11-21 00:14:43

解决方案2
0 2016-11-21 00:23:36

解决方案3
0 2016-11-21 19:43:11