Отступы элементов li в ng-repeat

Question

Я использую ng-repeat, чтобы отображать элементы списка с некоторым текстом. И я хочу, чтобы каждый отдельный элемент был отступом от 10 до 20 пикселей справа от предыдущего. У меня нет большого опыта работы с css.

<li ng-repeat="todo in todos" 
    ng-class="{'selectedToDo': (todo.id == selectedToDo)}"> 
    {{todo.toDoText}} 
</li> 

Вот jsFiddle с моим кодом.

Заранее благодарен!

Answer 1

вы можете использовать ng-style, чтобы решить вашу проблему:

<li ng-repeat="todo in todos" 
     ng-class="{'selectedToDo': (todo.id == selectedToDo)}" 
     ng-style="{'margin-left': 10*$index+'px'}"> 

    {{todo.toDoText}} 
</li> 

$index является varibale, который будет установлен ng-repeat. Вы можете использовать это, чтобы рассчитать свой стиль.

Answer 2

Изменить шаблон со следующим ::

<div ng-controller="MyCtrl"> 
    <ul> 
     <li ng-repeat="todo in todos" 
      ng-class="{'selectedToDo': (todo.id == selectedToDo)}" style="text-indent: {{$index * 10}}px"> 
      {{todo.toDoText}} 
     </li> 
    </ul> 
</div>