Angular - IF /ELSE condition in HTML

Question

I have simple angular / html code where I have a table and on each <li> there is checkbox and some text

My code looks like:

            <li ng-repeat="task in tasks | filter:statusFilter track by $index" ng-class="{completed: todo.completed}" ng-cloak>
                <div class="view">
                    <input class="toggle" type="checkbox" ng-model="todo.completed" ng-click="changeStatus(task.id)">
                    <label ng-dblclick="editTodo(todo)">{{task.text}}</label>
                    <button class="destroy" ng-click="removeeTask(task)"></button>
                </div>
                <form ng-submit="doneEditing(todo)">
                    <input class="edit" ng-trim="false" ng-model="todo.title" ng-blur="doneEditing(todo)" todo-escape="revertEditing(todo)" todo-focus="todo == editedTodo">
                </form>
            </li>

What this code do is:

When user click CHECKBOX it call ng-click and update "active" in database
Add "completed" which basicly change style of that <li> a bit

All data comes from some webservices and each task I have contains this information:

id

priority

text

active

My problem is that when I refresh the page I don't have any filter which add completed to all task which active is 0

Can someone help me how to make some if / else condition for this purpose?

What are you trying to make conditional? just bind it to a variable on the scope or just use an inline ternary — johnny 5
– johnny 5, Commented Oct 15, 2015 at 14:52
Possible duplicate of if else statement in AngularJS templates — Liam
– Liam, Commented Nov 20, 2017 at 14:21

David · Accepted Answer · 2015-10-15 14:50:47Z

1

Use following:

ng-class="{{completed : todo.active == 0}}"

In this case li-Tag gets class completed if todo.active equals 0

answered Oct 15, 2015 at 14:50

David

1538 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andurit Over a year ago

Hey @David, thanks this actualy work really well. But right now when I click checkbox nothing is going to happen :) becuase it is connected with todo.connected. So is there some way how to maybe just press all checkbox on clicked ?

David Over a year ago

Where ist todo.connected coming from? Its not in the information you posted. Could you please explain more detail?

Collectives™ on Stack Overflow

Angular - IF /ELSE condition in HTML

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related