dynamic changing of element's css class with angularjs

Question

I have this form:

<td ng-init="workflow.isSaved = false">
    <select ng-init="workflow.ProjectID = projectList[0]['Id']" chosen data-placeholder="Choose a project..."                 ng-model="workflow.ProjectID" ng-model-options="{ updateOn: 'blur' }" ng-change="workflow.isSaved = false" ng-options="item.Id as item.Name for item in projectList" style="width: 98%">
        <option value=""></option>
    </select>
</td>
<td><input class="date-input" type="text" placeholder="dd/mm/yyyy" ng-model="workflow.Date" ng-model-options="{ updateOn: 'blur' }" ng-change="workflow.isSaved = false" datapicker /></td>
<td><input class="task-input" type="text" value="" ng-model="workflow.TaskDescription" ng-model-options="{ updateOn: 'blur' }" ng-change="workflow.isSaved = false" placeholder="Task" required /></td>
<td><input class="time-input" type="text" value="" ng-model="workflow.TimeWorked" ng-model-options="{ updateOn: 'blur' }" ng-change="workflow.isSaved = false" placeholder="Elapsed time" required /></td>
<td>
    <input class="note-input" ng-class="{'note-input-two': logform.$valid && workflow.isSaved == false}" type="text" value="" ng-model="workflow.Note" ng-model-options="{ updateOn: 'blur' }" ng-change="workflow.isSaved = false" placeholder="Note" />
    <button class="deactive-button" ng-class="{'active-accept-button' : logform.$valid && workflow.isSaved == false}" ng-click="saveTask(workflow, logform)">✔</button>
    <button class="deactive-button" ng-class="{'active-delete-button' : some_expression }" ng-click="clearRow(workflow)">✖</button>
</td>

CSS:

.deactive-button {
    display: none;
}

.active-accept-button {
    display: inline-block;
    height: 24px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    width: 12%;
}

.active-delete-button {
    display: inline-block;
    height: 24px;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    width: 12%;
}

.note-input {
    display: inline-block;
    width: 98%;
}

.note-input-one {
    display: inline-block;
    width: 85%;
}

.note-input-two {
    display: inline-block;
    width: 70%;
}

My task is: When I load page I can see my row without any buttons, after I changed some field of row I can see X button and if I filled all fiedls and myform.$valid == true I can see two buttons V and X. When I click V (save row data to db) I can see row with 1 button X. My note-input field have 3 states: 1 - `default : width: 98%; 2 - note-input-one: width: 85%; 3 - note-input-two: width: 70%;

and my buttons have 2 states; 1 - deactive-button: display: none; 2 - active-accept-button/active-delete-button: display: inline-block...

How I can realize this via angularjs. I tried to use ng-class, but it works wrong. Please, help me to solve this issue.

The natural way to go is ngClass, whats the behaviour you get with ngClass? Did you try ng-if if you want to hide/show a component it could help? — piyuj
– piyuj, Commented Sep 9, 2015 at 13:48

Chrillewoodz · Accepted Answer · 2015-09-09 14:46:15Z

1

You should use ngClass:

<div ng-class="{'the-class-you-want-to-apply': theCondition === true}"></div>

This will add a class to the element when an expression evaluates to true. For classes that is one word, active for example you don't need to use the single quotes around the class name.

Using this method you can get the desired effect.

answered Sep 9, 2015 at 14:46

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

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

Collectives™ on Stack Overflow

dynamic changing of element's css class with angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related