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')">
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 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'"
I got this in my .html file :
<tr ng-repeat="collab in collabs">
<td>{{collab.firstname}}</td>
<td>{{collab.lastname}}</td>
<td>{{collab.ext}}</td>
</tr>
collab.ext is a boolean value, and I want to show Yes when it is true, and No when it is false.
Does Angular provide something for this? :-)
Ternary operator if ? then : else did the job great:
<tr ng-repeat="collab in collabs">
<td>{{collab.firstname}}</td>
<td>{{collab.lastname}}</td>
<td>{{collab.ext ? 'Yes' : 'No'}}</td>
</tr>
Make attempted to use "ng-if" ?
<div ng-if = "Variable == 5">
<!- we do whatever we want ->
</div>
<div ng-if = 'variable! = 5 ">
<!- we do whatever we want ->
</div>
I have in controller so far:
$scope.currentPage = 0;
Now, without any additional code (method) in controller I want to set opacity 0.4 on image when currentPage ==0
So I wrote:
<div ng-controller="ctrlRead">
<div class="pagination no-margin ">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href=""
ng-class="{disabled: currentPage == 0}">
<i class="icon-fast-backward"
ng-style="{opacity : (currentPage == 0)?'0.4':'1'}">
</i>
</a>
</li>
</ul>
</div>
</div>
But I get error:
Unexpected next character at columns 29-29 [?] in expression [{opacity : (currentPage == 0)?'0.4':'1'}]
Fiddle
Do I miss something?
Thank you,
[EDIT]
I can write ng-style="myOpacity"
and in controller:
$scope.myOpacity = {
'opacity': ($scope.currentPage == 0)?0.4:1
};
But it demands additional code in controller
Actually, AngularJS 1.1.5 has ternary operator (see https://github.com/angular/angular.js/commit/6798fec4390a72b7943a49505f8a245b6016c84b) so if you use a version >= 1.1.5 you should be able to use:
ng-style="{'opacity' : currentPage == 0 ? 0.4 : 1}"
Update: Since version 1.1.5, Angular does have support for ternary operator in templates.
Angular does not have support for the ternary operator in templates. You can, however, use the poor man's ternary operator:
ng-style="{opacity : ((currentPage == 0) && '0.4') || '1'}">