Question

这可能有点难以阅读，但我认为没有一些上下文会相当混乱。现在，我有一个网站，在我的所有页面上保持相同的标题，只需包含一个ng-view来加载特定页面的内容。我的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>

在我的一个观点中，我正在尝试设置一个表格过滤器（根据年份过滤一系列锦标赛）。视图文件名为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>

最后，js代码，在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');
  }
});
});

我假设angular加载了我在index.html文件中包含的每个单独视图的所有脚本，这样在filter.js中，我的archives.html视图中的表将被成功定位。但是，过滤器没有发生任何事情。我错了这个假设，还是我对javascript的其他部分不认真？

Answer 1

你现在有两个问题。首先，您使用id =＆＃34; btn_filter＆＃34;声明了按钮。所以事件监听器应该绑定＆＃34; ＃＆＃34;

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

第二，＆＃34; id＆＃34;每个DOM元素应该是唯一的，不应该像你那样重复。

修改基于对问题的编辑，有一个错误class="btn_filter"和。{ $('.btn-filter')用破折号替换下划线。

修改另一个问题是$('.tbody tr[data-status="' + $target + '"]')将.tbody替换为tbody

Answer 2

你能告诉我们控制台日志输出吗？也许我们可以帮助您提供更多信息。您只需按F12并在控制台中单击即可。

你可以看看这篇关于过滤和排序角度的文章。

https://scotch.io/tutorials/sort-and-filter-a-table-using-angular

您可以在互联网上为此目的寻找一些图书馆。 https://github.com/mattiash/angular-tablesort

这个库似乎很容易使用。

在我看来，问题将是库和角度之间的任何不兼容，但没有日志我不能确定。尝试两个链接并对结果进行评分！。

祝你好运！

Answer 3

通过在我的app.js中设置一个专门为我的视图设置的控制器来管理找到一个可行的解决方案，并调用我在我的控制器中通过ng-click定义的函数来触发相关按钮的javascript。控制台日志现在正常工作，因为我认为在成功加载视图之前尝试访问元素是一个问题。感谢所有帮助过的人。

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

}

}]）;

角度ng-view

3 个答案: