I have 2 divs with an ng-class applied to evaluate a $scope property, called {{stepNumber}}.
<div id="step0" class="col-xs-2" ng-class="{{stepNumber}} == 0 ? 'active' : {{stepNumber}} > 1 ? 'complete' : 'disabled' ">
<div id="step1" class="col-xs-2" ng-class="{{stepNumber}} == 1 ? 'active' : {{stepNumber}} > 1 ? 'complete' : 'disabled' ">
The first time the page is loaded, {{stepNumber}} is 0,
1st div gets class active, 2nd div gets class disabled.
When I click a button that uses ng-click to increment the property value by doing $scope.stepNumber++;, the divs do not reevaluate the ng-class expression.
{{stepNumber}} is now 1 but the 1st div class is still active, 2nd div class is still disabled
How can I get the ng-class to reevaluate the expression?
That's not how ng-class works. Read its documentation carefully. The correct code would be:
ng-class="{active: stepNumber == 0, complete: stepNumber > 1, disabled: stepNumber != 0 && stepNumber <= 1}"
or
class="col-xs-2, {{stepNumber == 0 ? 'active' : stepNumber > 1 ? 'complete' : 'disabled' }}"
or
ng-class="stepNumber == 0 ? 'active' : stepNumber > 1 ? 'complete' : 'disabled'"
Related
I know this has been answered but I couldn't figure out what is wrong with my code here. I'm trying to add a class based of the conditional field.
React Code:
<div className="boards {task.IsClosed !== 0 ? 'complete' : ''}">
<p>{task.TaskName}</p>
<div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>
Output:
<div class="boards {task.IsClosed !== 0 ? 'complete' : ''}">
<p>Task 2</p>
<div><div>Completed</div></div>
</div>
I want the output to be <div class="boards complete">
<div className=`boards ${task.IsClosed !== 0 ? 'complete' : ''}`>
<p>{task.TaskName}</p>
<div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>
I think you want this^^^
for string interpolation in javascript the ` character must be used for quotes and the expression being interpolated must be within ${}
...
or you can make a variable to store the class i.e.
let className = task.IsClosed !== 0 ? 'complete' : '';
...
...
<div className={className}>
<p>{task.TaskName}</p>
<div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>
I have a list of items I am iterating through and need to programmatically add an event handler to the first rendered element. I do not see how this is possible in Vue.
<div ref="componentList" class="component-list col-9">
<template
v-for="( course, index ) in sortedCourseList"
>
<span
v-if="( index > 0 ) && (course.courseTitle[ 0 ] !== sortedCourseList[ index - 1].courseTitle[ 0 ])"
:id="course.courseTitle[ 0 ]"
:key="index"
class="component-list__letter-heading"
>
{{ course.courseTitle[ 0 ] }}
</span>
<CardLong
v-else
:key="index"
:ref="'card' + index"
>>> EVENT HANDLER <<<
:title="{
text: course.courseTitle,
order: 1,
}"
titleTag="h2"
icon
/>
</template>
</div>
I am looking where to implement something like
if ( index === 0 ) { ... }
in the CardLong component instance.
You can use the ternary operator to conditionally call a function on your event, whatever that is:
<div v-for="(a, i) in [1,2,3,4]" :key="i" #click="i == 0 ? doSomething() : ''">
Click Me!
</div>
I try displaying a select when the previous select was checked.
<div ng-repeat="item in collection">
<div ng-show="$index === 0 || $parent.list[$index].nom">
<select ng-model="$parent.list[$index].nom" ng-options="..."></select>
</div>
<div ng-repeat="item in collection">
I loop through collection and I create many selects that there are item in collection.
<div ng-show="$index === 0 || $parent.list[$index].nom">
I want to display/hide the parent div of selects with two conditions :
I show the div if the index is equal to 0 (for display first select)
I show the div if the current ngModel contains the nom
<select ng-model="$parent.list[$index].nom" ng-options="...">
I put a dynamic ngModel where each select has his own model like :
(source: noelshack.com)
Test Exemple : I have three options in a select, so I want give opportunity to member to choose each option of the select.
If the member choose an option of select 1 the seconde select show on and If he select an option of second select the third select show on but no more else...
THE PROBLEME HERE :
$index in the directive ngShow seem's known with this condition :
$index === 0
but no here :
$parent.list[$index].nom
You must include track by $index in your ng-repeat...
<div ng-repeat="item in collection track by $index>
I think it should be:
<div ng-show="$index === 0 || $parent.list[$index - 1].nom">
<select ng-model="$parent.list[$index].nom" ng-options="el for el in els"></select>
</div>
Note, that you want to refer previous item in the list, hence $index - 1.
I liked the ternary operator but right now I've 3 values to deal with
<li class="table-view-cell media" ng-class="detail.keynote ? 'keynote' : 'session'">
javascript
detail.keynote = 0 //(class session)
detail.keynote = 1 //(class keynote)
deail.ketnote = -1 //(class neutral)
Any eloquent angular approach for this?
use this
<li class="table-view-cell media" ng-class="{'session': detail.keynote==0,'keynote':detail.keynote==1,'neutral':detail.keynote==-1}" >
or
<li class="table-view-cell media" ng-class="detail.keynote== 0 ? 'session' : (detail.keynote== 1 ? 'keynote' : 'neutral')">
I have this two ng-class sentences. How can I mix them into one:
ng-class="['step-0' + main.activeConnectStep]"
ng-class="{'active': main.activeConnectStep > 0 }"
ng-class="{'active': main.activeConnectStep > 0, 'step-0{{main.activeConnectStep}}': 1}"
Using array notation:
ng-class="['step-0' + main.activeConnectStep, main.activeConnectStep > 0 ? 'active' : '']"