将活动类添加到过滤器链接AngularJS

时间：2014-03-15 20:13:57

标签： javascript html angularjs

我使用AngularJS设置了我的网站，因此数据循环并正确显示。我还有一个菜单，当你点击每个链接时只显示该类别但是我似乎无法在点击它们时在每个链接上添加活动类（当点击另一个类别时显然被删除）我要么将所有链接都设置为有效或无。不幸的是，试图让这个工作在js小提琴，但在本地工作的代码不起作用。希望有人能指出我正确的方向。

Js文件：

var myApp = angular.module('myApp', ['ngSanitize']);

myApp.factory('Videos', function () {
    var Videos = {};
    Videos.video = [{
        Title: "VIDEO TITLE",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 1",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 2",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 2",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 3",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 3",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 4",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 1",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 5",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 5",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 6",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 6",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 7",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 7",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 8",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 2",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 9",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 3",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }, {
        Title: "VIDEO TITLE 10",
        SubHeading: "SUBTITLE",
        Category: "CATEGORY 4",
        Version: "1",
        url: "asdfghjkl;",
        image: "IMAGE",
        alt: "Image alt",
        description: "Some Text",
        link: "<a href=\"/URL\"><i class='fa-li fa fa-anchor flower'></i>LINK</a>",
        link2: "<a href=\"/URL2\"><i class='fa-li fa fa-anchor flower'></i>LINK2</a>"
    }];
    return Videos;
});

function VideoCtrl($scope, Videos) {
    $scope.filters = {};
    $scope.videos = Videos;
}

HTML：

        <h1 class="pageheading">
            PAGE TITLE  </h1>
            <hr class="heading" />
            <div class="row">
                <div class="col-sm-12" ng-controller="VideoCtrl">
                    <div class="row">

                        <div class="col-md-8 col-lg-9" >
                            <div class="media thumbnail software" itemprop="video" ng-repeat="video in videos.video | filter:filters" >
                                <div class="col-md-5 text-center'" ng-class-even="'col-md-push-7'">
                                    <div class="play-container">

                                        <a ngHref="http://youtu.be/{{video.url}}?autoplay=1" class="fancybox-media picimg">
                                            <img alt="{{video.alt}}" ng-src="assets/img/{{video.image}}.jpg">

        <span class="play-control">
            <span class="fa fa-play-circle hidden-xs"></span>
        </span>
    </a>            
</div>
</div>
<div class="media-body col-md-7" ng-class-odd="'blue'" ng-class-even="'col-md-pull-5 green'">
<h2 class="media-heading pageheading">
        <a ngHref="http://youtu.be/{{video.url}}?autoplay=1" class="fancybox-media" itemprop="embedUrl">
        <span itemprop="name" ng-bind-html="video.Title"></span>
        </a>        
        </h2>
        <h3 ng-bind-html="video.SubHeading"></h3>
        <small><i ng-bind-html="video.Version">{{video.Version}}</i></small>
        <hr class="heading">
        <p itemprop="description" ng-bind-html="video.description"></p>
        <ul class="fa-ul">
            <li ng-bind-html="video.link">{{video.link}}</li>
            <li><a ng-click="filters.Category = video.Category">{{video.Category}}</a></li>
        </ul>
    </div>
</div>

</div>
<br class="visible-xs" />
<div class="col-md-4 col-lg-3 software">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <i class="fa fa-video-camera"></i> Video Categories     </h3>
            </div>

            <nav class="list-group">
                <a href ng-click="filters.Category = 'Category 1'" class="list-group-item" >Category 1<i class="fa fa-chevron-right"></i></a>
                <a href ng-click="filters.Category = 'Category 2'" class="list-group-item">Category 2 <i class="fa fa-chevron-right"></i></a>
                <a href ng-click="filters.Category = 'Category 3'" class="list-group-item">Category 3 <i class="fa fa-chevron-right"></i></a>
                <a href ng-click="filters.Category = 'Category 4'" class="list-group-item">Category 4 <i class="fa fa-chevron-right"></i></a>
                <a href ng-click="filters.Category = 'Category 5'" class="list-group-item">Category 5 <i class="fa fa-chevron-right"></i></a>
                <a href ng-click="filters.Category = 'Category 6'" class="list-group-item">Category 6 <i class="fa fa-chevron-right"></i></a>
                <a href ng-click="filters.Category = 'Category 7'" class="list-group-item">Category 7 <i class="fa fa-chevron-right"></i></a>   </nav>
            </div>              </div>
        </div>
    </div>
</div>

据我所知，我需要为每个链接添加类似ng-class =“{active：clicked}”的内容，但我不确定如何继续js方面，因为我看到的每个例子都是更多的方式复杂或更简单。所以基本上我想要的是当我点击类别1时，只显示类别1中的项目（正在运行）以及类别1的链接以应用活动类。

之后我希望能够同时更改页面标题以更改为为每个类别指定的标题。

1 个答案:

答案 0 :(得分：0)

您可以使用当前所选类别在范围内的事实。

ng-class="{active: filters.Category == 'Category 1'}"

示例：http://plnkr.co/edit/vcuJECCSM7KHJaU9eZKq?p=preview

相关问题
最新问题