在 ng 重复中缩进 li 项

Question

我正在使用ng-repeat来显示带有一些文本的列表项。我希望每个项目都从前一个项目向右缩进 10-20px。我对 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是一个变种，将由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>