Any way to achieve indexOf/includes/contains in an expression in a Lightning Component?

Question

I want to check if a string contains a specific sequence of characters in some component markup using an expression. The Expression Functions Reference lists equals but nothing that looks suitable. And I don't see a way to hook in your own functions in expressions.

Can this be accomplished on the fly or am I stuck with finding some earlier point in the code to perform the check and store it in yet another attribute?

Answer 1

Honestly it's a good feature to have in LC but at the moment we are limited to the function expression as mentioned in here. So only option we have is, to do includes/indexOf... stuffs in the controller/helper and set the appropriate attribute value.

For eg:

controller.js

({
    init : function(component, event, helper) {
        let word = component.get("v.word"), sequenceToCheck = 'abc';
        if (work.indexOf(sequenceToCheck) > -1) {
            console.log('sequence exist');
        } else {
            console.log('sequence does not exist');
        }

        if (work.includes(sequenceToCheck)) {
            console.log('sequence exist');
        } else {
            console.log('sequence does not exist');
        }

    }
})

Answer 2

You can make a custom aura:if component who can manage extended conditions to test

quick sample ( not tested but should work ) :

<aura:component name="auraIfAdvanced">
<aura:handler name="init" value="{!this}" access="global" action="{!c.doInit}" />
<aura:attribute name="list" type="Object[]" />
<aura:attribute name="element" type="String" />
<aura:attribute name="condition" type="Boolean" default="false" />

<aura:if isTrue="{!v._condition}">
    {!v.body}
</aura:component>

controller:

doInit: function(component, event, helper) {
    if (component.get('v.list').indexOf(component.get('v.element)) > -0 )
         component.set('v.condition',true);
}

then you call it like

<c:auraIfAdvanced list="["a","b","c"]" element="b">
         WhateverU_NeedHere
 </c:auraIfAdvanced>