JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="myApp"><div ng-controller="MyCtrl">
<event class="event" ng-repeat="event in events" event="{{ event.name }}"
ng-class="{'selected' : event.selected}"
ng-click="selectEvent($index)">
{{ event.name }}
</event>
</div></div>
CSS
event.selected {
text-decoration: underline;
}
JavaScript
var myApp = angular.module('myApp', []).controller('MyCtrl', function ($scope, $http) {
$scope.events = [
{name: 'event1', selected: true},
{name: 'event2', selected: false},
{name: 'event3', selected: false}
];
$scope.selectEvent = function($index) {
var e = $scope.events[$index];
e.selected = !e.selected;
}
$scope.isActive = function(item) {
return $scope.selected === item;
};
});