AngularJS:如何在ng-repeat中为被点击的项分配活动类

Question

我对如何在使用ng-repeat指令时显示单击项上的.active类感到困惑。这是一个普朗克。

这是我的观点

<h4>Arctic Videos</h4>
<ul class="list-unstyled">
    <li class="clearfix" ng-repeat="item in videos" ng-class="{ active: $index }" style="padding-bottom: 2em;">
        <div style="float: left; position:relative;">
        <img class="img-thumbnail" ng-src="{{item.thumbUrl}}" width="100" height="68" alt="">
        </div>
        <h4><a href="#/videos/{{videos.indexOf(item)}}" ng-click="I AM NOT SURE WHAT TO PUT HERE">{{item.title}}</a></h4>
    </li>
</ul>

我script.js

    var ArcticApp = angular.module('ArcticApp', ['ngRoute', 'ngSanitize']);
    ArcticApp.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: './partials/map.html',
            controller: 'MainController'
        })
        .when('/videos/:itemId', {
            templateUrl: './partials/videos.html',
            controller: 'VideoController'
        })
        .otherwise({
            redirectTo: '/'
        })
});
ArcticApp.controller('MainController', function($scope){
    $scope.message = "This is the map page!";
});
ArcticApp.controller('VideoController', function($scope, $routeParams, $sce){
        $scope.videos = [
  {
    "blockquote": "et sint quaenqui odio fugit quia aut modi id maximensequi qui et",
    "title": "Canada",
    "synopsis": "<p>Some text will go here and there. Some more will go here.</p><p>Yet even some more text will go here and there. yes, tehre's even more here.</p>",
    "id": 897,
    "thumbUrl": "http://placehold.it/100x68"
  },
  {
    "blockquote": "sit molestiae possimus ut in explicabonea autem saepe a iusto est exercitationem atndistinctio quia consectetur nulla vel maxime",
    "title": "USA",
    "synopsis": "<p>Some text will go here and there. Some more will go here.</p><p>Yet even some more text will go here and there. yes, tehre's even more here.</p>",
    "id": 471,
    "thumbUrl": "http://placehold.it/100x68"
  },
  {
    "blockquote": "recusandae natus minus est saepe aliasnvero amet quia natus voluptatem ut saepe dolor remnperspiciatis quia unde quia cum aliquam sint",
    "title": "Russia",
    "synopsis": "<p>some text can go here </p>",
    "id": 400,
    "thumbUrl": "http://placehold.it/100x68"
  }
];
        $scope.whichItem = $routeParams.itemId;
        $scope.trustAsHtml = $sce.trustAsHtml.bind($sce);
});

如何将活动类分配给已单击的项?

Answer 1

使用

ng-class="{ active: selectedVideo === item }"

和

ng-click="selectVideo(item)"

在控制器中添加

$scope.selectVideo = function(video) {
    $scope.selectedVideo = video;
}

Answer 2

你可以这样使用

<li class="clearfix" ng-repeat="(key,item) in videos" ng-class="{ active:(condition) }" style="padding-bottom: 2em;">

key是迭代次数，condition可以是任何布尔逻辑，使活动类为真

ng-class="{ active: 1==1 } 

在这种情况下，因为1==1为真，所以将打印活动类