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>

ng-repeat中li项的缩进

2 个答案: