CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Mayank
Mayank

Reputation: 21

How to add a particular class to the elements repeated using ng-repeat?

I have been using ng-repeat for adding repeated list items in my code. But, I am not getting how to add a class to just one of the elements. I am looking for something like this.

  <div class="events-wrapper">
    <div class="events">
      <ol>
        <li><a href="" data-date="00/00/00" class="selected">21</a></li>
        <li><a href="" data-date="01/00/00">22</a></li>
        <li><a href="" data-date="02/00/00">23</a></li>
        <li><a href="" data-date="03/00/00">24</a></li>
        <li><a href="" data-date="04/00/00">25</a></li>
        <li><a href="" data-date="05/00/00">26</a></li>
        <li><a href="" data-date="06/00/00">27</a></li>
        <li><a href="" data-date="07/00/00">28</a></li>
        <li><a href="" data-date="08/00/00">29</a></li>
        <li><a href="" data-date="09/00/00">30</a></li>
        <li><a href="" data-date="10/00/00">31</a></li>
        <li><a href="" data-date="11/00/00">32</a></li>
        <li><a href="" data-date="12/00/00">33</a></li>
        <li><a href="" data-date="13/00/00">34</a></li>
        <li><a href="" data-date="14/00/00">35</a></li>
        <li><a href="" data-date="15/00/00">36</a></li>
        <li><a href="" data-date="16/00/00">37</a></li>
        <li><a href="" data-date="17/00/00">38</a></li>
        <li><a href="" data-date="18/00/00">39</a></li>
        <li><a href="" data-date="19/00/00">40</a></li>
        <li><a href="" data-date="20/00/00">41</a></li>
        <li><a href="" data-date="21/00/00">42</a></li>
        <li><a href="" data-date="22/00/00">43</a></li>
        <li><a href="" data-date="23/00/00">44</a></li>
      </ol>

      <span class="filling-line" aria-hidden="true"></span>
    </div>
    <!-- .events -->
  </div>
  <!-- .events-wrapper -->

I have done this:

  <div class="events-wrapper">
    <div class="events">
      <ol>
        <li ng-repeat = "dt in time">
            <a href="" data-date="{{dt.dd}}">{{dt.dc}}</a>
        </li>
      </ol>

      <span class="filling-line" aria-hidden="true"></span>
    </div>
    <!-- .events -->

The accompanying js is 

var app = angular.module('timelineApp', [])
app.controller('tryCtrl', function ( $scope, $http ) {
    $http({
        method: 'get',
        url: '../json/timeline.json'
    }).then(function (response) {
        $scope.time = response.data.timeline;
    })
})

The elements properly repeat. But, I want to initialize this by adding the selected class to the first element?

Upvotes: 1

Views: 50

Answers (2)

georgeawg
georgeawg

Reputation: 48968

If you want multiple selections from an array, use $index:

<li ng-repeat="dt in time" ng-class='{selected: itemSelected[$index]}'>
  <a href="" data-date="{{dt.dd}}">{{dt.dc}}</a>
</li>

Upvotes: 2

Alexander van Oostenrijk
Alexander van Oostenrijk

Reputation: 4764

You can use the ng-class directive in combination with ng-repeat's $first attribute to set a class selected only for the first element that is produced by the repetition.

<li ng-repeat="dt in time" ng-class='{selected:$first}'>
  <a href="" data-date="{{dt.dd}}">{{dt.dc}}</a>
</li>

$first is a special property that is automatically exposed on the local scope when you use ng-repeat.

Upvotes: 2

Related Questions