ng-repeat 中 li 项的缩进答案

【问题标题】：Indentation of li items in ng-repeatng-repeat 中 li 项的缩进
【发布时间】：2014-02-13 21:24:27
【问题描述】：

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

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

这是一个jsFiddle 和我的代码。

提前致谢！

【问题讨论】：

标签： css angularjs angularjs-ng-repeat

【解决方案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 设置的变量。你可以用它来计算你的风格。

【讨论】：

【解决方案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>

【讨论】：