角度表示のJavascript

これは少し読むかもしれませんが、文脈がなければかなり混乱すると思います。今、特定のページのコンテンツをロードするためのngビューを含むだけで、すべてのページに同じヘッダーを保持するサイトがあります。私のindex.htmlファイルは、私が（年に基づいて、トーナメントのリストをフィルタリング）テーブルのフィルタを設定しようとしています、私のビューのいずれかでこの角度表示のJavascript

<!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という名前の、そして現在のように見えている：私はあることを想定しています

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

：

<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コード、各ビューのindex.htmlファイルに含まれているすべてのスクリプトの角度ロード。filter.jsでarchives.htmlビューのテーブルが正常に配置されるようにします。ただし、フィルタで何も起こっていません。私はこの仮定で間違っているのですか、または私はjavascriptの他の部分に不注意ですか？

出典

2016-11-21 K. Li

ビューがロードされていないときにjsコードが実行されていて、ビューに存在する可能性のある1つ以上の要素にイベントをバインドしている場合、DOMに存在しない要素あなたはそれに何かをバインドすることはできませんので、私は何を言うだろうが、このイベントをバインドしようとします。これを見てくださいhttp://stackoverflow.com/questions/30332945/jquery-click-events-not-working-with-angularjs – Manish

これは正しい方向に私を指摘、多くのありがとう。 –

今は2つの問題があります。イベントリスナーは「＃」

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

第二にバインドする必要がありますので、まず、あなたはID =「btn_filter」でボタンを宣言し、「ID」はユニークあたりのDOM要素であるべきとのように繰り返されるべきではありませんあなたはしました。

編集：質問の編集に基づいて 、class="btn_filter"と $('.btn-filter')とタイプミスはダッシュでアンダー置き換えるがあります。

編集： もう一つの問題は、あなたが私たちのコンソールログ出力をしてください示すことができtbody

出典

2016-11-21 00:14:43 Mouneer

申し訳ありませんが、それはタイプミスでした。私はそれを以前に試みていたが、それを元に戻すことを忘れてしまった。 "btn btn-filter"クラスでは、これと同じ問題があります。 –

心配しないで、答えの編集を確認してください。 – Mouneer

ああ、それをキャッチしてくれてありがとう..私はちょうど汚いているよ –

$('.tbody tr[data-status="' + $target + '"]')がで.tbodyを交換するのですか？多分私たちはより多くの情報であなたを助けることができました。 F12を押し、コンソールでクリックするだけです。

あなたは、角度でのフィルタリングやソートについては、この記事を見ることができます。

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

あなたは、インターネット上で、この目的のために、いくつかのライブラリを探していることができます。 https://github.com/mattiash/angular-tablesort

このライブラリは、使いやすいようです。私の意見で

、問題は、ライブラリと角の間で任意の非互換性になりますが、ログなしで、私はそれについて確認することはできません。両方のリンクを試して、結果を送ってください！

幸運を祈る！

出典

2016-11-21 00:23:36 Auros132

これを調べます、ありがとう！ –

ボタンの1つがクリックされても、何も出力されていないときはいつでもコンソールにログインしています。おそらく、これは互換性の問題ですか？ –

私のapp.js内のコントローラーを私のビュー専用に設定し、コントローラーで定義した関数をng-clickで定義して、関連するボタンのJavaScriptをトリガーすることで、効果的な解決策を見つけることができました。ビューが正常にロードされる前に要素にアクセスしようとすると問題が発生したと思うので、コンソールログが正常に機能しています。助けてくれた皆様に感謝します。

<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>

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

}

}]）。

出典

2016-11-21 19:43:11

答えて

関連する問題