Question

我一直在使用ng-repeat在代码中添加重复的列表项。但是，我没有获得如何仅向其中一个元素添加类的方法。我正在寻找这样的东西。

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

我已经做到了：

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

随附的js是

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;
    })
})

元素正确重复。但是，我想通过将选定的类添加到第一个元素来初始化它？

Answer 1

您可以将ng-class指令与ng-repeat的{{1}}属性结合使用，以仅为重复产生的第一个元素设置类$first。

selected

<li ng-repeat="dt in time" ng-class='{selected:$first}'> <a href="" data-date="{{dt.dd}}">{{dt.dc}}</a> </li>是一个特殊属性，当您使用$first时会自动在本地范围内显示。

Answer 2

如果要从数组中进行多个选择，请使用$index：

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

如何在使用ng-repeat重复的元素中添加特定的类？

2 个答案: