ng-repeat中的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設置一個varibale。你可以用它來計算你的風格。

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>