CODEWITHSUNDEEP
cssangularjsangularjs-ng-repeat
nikolakoco
nikolakoco

Reputation: 1403

Indentation of li items in ng-repeat

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.

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

Here is a jsFiddle with my code.

Thanks in advance!

Upvotes: 2

Views: 2858

Answers (2)

dhavalcengg
dhavalcengg

Reputation: 4713

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>

Upvotes: 3

michael
michael

Reputation: 16341

you may use ng-style to solve your problem:

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

Upvotes: 6

Related Questions