amp-htmlamp-bind

How to apply logical operator in google amp script?

With reference to Google AMP, I have the following code:

<a [href]="'?view=amp&constraint=' + selectedOption1 + '&sort_by=' + selectedSorting"> Submit </a>

I would like to display '?view=amp&constraint=' only if the value of selectedOption1 exists.

How can I achiieve the same?

I have tried the below:

<a [href]="'?view=amp&amp;constraint=' + (selectedOption1 || '') + '&amp;sort_by=' + (selectedSorting || '')" > </a>
Solution

  • You have to do the condition operation on selectedOption1. Here is an example shared for your reference with two buttons, which will change the state of selectedOption1 and accordingly, you can check anchor tag's href value, and for quick view I have used paragraph tag to display same value as href in paragraph. Hope this will help you.

    To run this code, copy whole code and replace it with the body part on here AMP playground, just make sure that you have imported amp-bind js on amp playground sample page. 

    <p [text]="selectedOption1 ? 'https://www.example.com?view=amp&constraint=' + selectedOption1 + '&sort_by=' + selectedSorting : 'www.example.com'">

</p>
  <a href="#" [href]="selectedOption1 ? 'https://www.example.com?view=amp&constraint=' + selectedOption1 + '&sort_by=' + selectedSorting : 'https://www.example.com'">
  Link
</a>
 </br>

<button on="tap:AMP.setState({selectedOption1: 'Interactivity',selectedSorting:'orderby_date'})">
  Say "Hello Interactivity"
</button>
<button on="tap:AMP.setState({selectedOption1: '',selectedSorting:''})">
  Say "Blank"
</button>