ng-repeat中li项的缩进

I am using ng-repeat to show list items with some text. And I want every single item to be indented 10-20px to the right from the previous one. I don't have much experience with css.

我正在使用ng-repeat来显示带有一些文本的列表项。而且我希望每个项目都能从前一个项目向右缩进10-20px。我对css没有多少经验。

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

Here is a jsFiddle with my code.

这是我的代码的jsFiddle。

Thanks in advance!

提前致谢!

2 个解决方案

#1

you may use ng-style to solve your problem:

你可以使用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 is a varibale that will be set by ng-repeat. You may use this to calculate your style.

$ index是一个由ng-repeat设置的变量。您可以使用它来计算您的风格。

#2

Change your template with following::

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

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

#1