角度ng-view中的Javascript
[英]Javascript in angular ng-view
问题描述
这可能有点可读，但我认为如果没有上下文，这将相当混乱。 现在，我有一个站点，它的角度在所有页面上保持相同的标题，只是包含一个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 / 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');
}
});
});
我假设对每个单独的视图都按角度加载了index.html文件中包含的所有脚本，因此在filter.js中，archives.html视图中的表将被成功定位。 但是，过滤器没有任何反应。 我在这个假设中是错误的，还是我对javascript的其他部分不注意？
3 个解决方案
解决方案1
0 2016-11-21 00:14:43
您现在有两个问题。 首先，您使用id =“ btn_filter”声明了按钮，因此事件监听器应与“ ＃ ”绑定
$('#btn-filter').on('click', function () {});
其次，“ id”对于每个DOM元素应该是唯一的，并且不应像您一样重复。
编辑：根据问题的编辑，有一个错字，带有class="btn_filter"和$('.btn-filter')用下划线代替下划线。
编辑：另一个问题是$('.tbody tr[data-status="' + $target + '"]')用tbody替换.tbody
解决方案2
0 2016-11-21 00:23:36
您能告诉我们控制台日志输出吗？ 也许我们可以为您提供更多信息。 您只需要按F12并在控制台中单击即可。
您可以查看这篇有关角度过滤和排序的文章。
https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
您可以在互联网上为此目的寻找一些图书馆。 https://github.com/mattiash/angular-tablesort
该库似乎易于使用。
在我看来，问题将是库和angular之间的任何不兼容，但是如果没有日志，我无法确定。 尝试两个链接并注释结果！
祝好运！
解决方案3
0 2016-11-21 19:43:11
通过在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在Angular中不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.