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>
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 want to hide the button if it's the delete folder and show if it's the inbox. The code below does not work as the button is always shown.
<div class="message-footer-height" >
<div class="custom-div-class" ng-click="" >
<button class="custom-btn-default"
ng-hide="messageState.details && itemTappedValue = 'delete'"
ng-class="{ 'msg-btn' : userMessageDetails.id === -1 }"
ng-click="deleteMessage()" >
{{"button.delete"|translate}}
</button>
</div>
</div>
Thanks
You need to use ==, == is loose equality and === is strict equality. Read more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
<div class="message-footer-height" >
<div class="custom-div-class" ng-click="">
<button class="custom-btn-default"
ng-hide="messageState.details && itemTappedValue == 'delete'"
ng-class="{ 'msg-btn' : userMessageDetails.id === -1 }"
ng-click="deleteMessage()">
{{"button.delete"|translate}}
</button>
</div>
</div>
You need double equal sign here itemTappedValue = 'delete'
Say I have
<div ng-if="groupA.length > 0" ng-repeat="element in groupA"> .... </div>
<div ng-if="groupA.length == 0" ng-repeat="element in groupB"> .... </div>
Both divs are exactly the same HTML except for the if conditions and the fact that they repeat on two different groups. Am I able to join them together in one div element? I.e. <div ng-repeat="element in (groupA || groupB)"> ... </div>
I know I can check in the controller to and have a condition there like groupC = groupA.length > 0 ? groupA : groupB and have in the html <div ng-repeat="element in groupC> ... </div> but I was wondering if there's a way to do it on HTML directly?
Should work with ternary operators. Demo: https://plnkr.co/edit/yqrUb2UNAasFs4EKaf0b
<div ng-repeat="element in (groupA.length > 0 ? groupA : groupB)"> .... </div>
you can just add a condition inside the ng-repeat like as
<div ng-repeat="element in (groupA.length > 0 ? groupA : groupB)"> </div>
Hope this will help you
I have the following code:
<li class="child-item" role="menuitem" ng-show="isSubMenu" ng-repeat="sublink in subLinks" ng-class="{'last' : $last && setLastElemFlag($last) || false}" ng-click="stopPropagation()">
<img id="child-item-bullet" /><span class="sub-child-span">{{sublink.name}}</span>
<img id="child-dotted-lines-bottom" ng-hide="isLastElement"/>
<img id="child-dotted-lines-bottom-2" ng-hide="isLastElement" />
</li>
Below is my setLastElemFlag function:
$scope.setLastElemFlag = function (value) {
alert(value);
$scope.isLastElement = value;
}
What I'm trying to do is I want to hide child-dotted-lines-bottom and child-dotted-lines-bottom-2 once the item in ng-repeat is the last one. But instead of hiding only the last pair, the above code hides all instances of the image.
To make things much clearer, this is what I want to achieve:
but instead I got this:
What's wrong with my code?
Thanks.
Try it like that, using $last:
<li class="child-item" role="menuitem" ng-show="isSubMenu" ng-repeat="sublink in subLinks" ng-class="{'last' : $last && setLastElemFlag($last) || false}" ng-click="stopPropagation()">
<img id="child-item-bullet" /><span class="sub-child-span">{{sublink.name}}</span>
<img id="child-dotted-lines-bottom" ng-hide="$last"/>
<img id="child-dotted-lines-bottom-2" ng-hide="$last" />
</li>
Here are docs.
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'"