Css 在ng repeat中缩进li项

我使用ng repeat显示带有一些文本的列表项。我希望每一个项目都从上一个项目向右缩进10-20px。我对css没有太多经验

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

{{todo.toDoText}

这是我的密码

提前谢谢

您可以使用以下方法解决您的问题：

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

     {{todo.toDoText}}
</li>

{{todo.toDoText}

---

$index

是将由

ng repeat

设置的变量。您可以使用它来计算样式。

使用以下内容更改模板：：

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

{{todo.toDoText}