What is a clever way to code this Angular HTML using just a single <a> tag?

    <ul>
        <li ng-repeat="channel in Board.Channels">
            <a ng-if="channel.key == ''" ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}">{{channel.title}}</a>
            <a ng-if="channel.key != ''" ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}?channel={{channel.key}}">{{channel.title}}</a>
        </li>
    </ul>

The main distinction between the two links is that one includes a query parameter, while the other does not.

Is there a more streamlined way to handle this without using dual <a ng-if=""> condition tags?

javascriptangularjs

Answer №1

An example of the angular binding {{}} is when it contains code or scope variables. Another way to utilize angular bindings is through the ternary operator for binds which can be written like this: 

{{boolean && ifTrueValue || ifFalseValue}}
, resembling 
(boolean) ? ifTrueValue : ifFalseValue
. 

<ul>
    <li ng-repeat="channel in Board.Channels">
        <a ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}{{(channel.key == '') && ''|| '?channel='+ channel.key}}">{{channel.title}}<span class="cgCount">{{channel.count}}</span></a>
    </li>
</ul>

Answer №2

It took me some time, but I finally managed to solve it.

    <ul>
        <li ng-repeat="channel in Board.Channels" ng-init="query= channel.key != '' && '/?channel='+channel.key || ''">
            <a ng-href="/{{Board.type}}/{{Board.id}}/{{Board.key}}{{query}}">{{channel.title}}</a>
        </li>
    </ul>

While Angular doesn't allow the use of the ?: operator in expressions, you can achieve similar results by using boolean statements like shown above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting $on in Angular

I have a situation where I need to pass a value from the Main controller to the Child controller. These are the two controllers involved: .controller('mainController', ['$scope', '$rootScope', '$location', 'CI ...

angularjscontrollerparent-child

What is the correct way to express an object in an array?

I've encountered an issue: I'm working with an array called _daysConfig<DayConfig> When I manually populate it like this, everything functions correctly: _daysConfig: DayConfig[] = [ { date: new Date('Wed Jul 22 2020 21:06:00 GMT+02 ...

javascriptangulartypescriptionic-framework

Transform the appearance of several elements using querySelectorAll

When targeting class names in an HTML page with a checkbox using querySelectorAll, keep in mind that getElementByID only works with the first element. QuerySelectorAll displays a nodeList which might require some corrections - how can this be achieved? le ...

javascript

trouble seeing images with an array input and ngFor in Angular

I am encountering issues while attempting to exhibit an array of images by their source link using ngFor. It seems like there are errors hindering the functionality! Below is the image HTML code located within my card component: <div class="Session-Pa ...

javascripthtmlarraysangular

able to utilize service within a loop

import { Component, Input, Output, OnInit, OnChanges } from '@angular/core'; import { ViewComponent } from '../view/view.component'; import { HitoService } from '../../services/hito.service'; @Component({ selector: 'ap ...

javascriptangularangular2-observablesvis.js

Change the size of the individual cells within JointJS

I have some code for a jointjs demo that includes basic shapes on a paper. I am looking to adjust the size of the shapes or highlight them when clicked on or when the cursor moves over them. var graph = new joint.dia.Graph; v ...

javascriptjointjs

Ways to conceal all components except for specific ones within a container using JQuery

My HTML structure is as follows: <div class="fieldset-wrapper"> <div data-index="one">...</div> <div data-index="two">...</div> <div data-index="three">...</div> < ...

javascripthtmljquery

Display a single item using Jquery when clicking on an element with the same class

I'm relatively new to JQuery/Javascript scripting and I'm having some difficulty. How can I display one item with the same class without affecting the other items? Here is my code: $(function() { $('.embedContainer > .myPosterImage& ...

javascripthtmljquerycssscripting

PHP jQuery buttons for popovers

With a simple click of a button, I can generate 8 presentations and then edit each one individually by clicking on its respective name. Within this editing process, there is another form where I would like to include additional buttons that allow me to cus ...

javascriptphpjqueryhtmlyii2

Transferring PHP array data to JavaScript using echo

I'm currently in the process of working on a project that requires extracting data from a database and converting it into a JavaScript array. This array will be used to dynamically update a graph. Below is the PHP code I have written to retrieve the ...

javascriptphparraysjsongoogle-visualization

Distinct index.html file for Angular application

I am looking to customize the index.html for my client. My goal is to set up a /backend with its own index.html and unique views. Additionally, I want to create a / route where I can incorporate forms for user interaction on the front end while utilizin ...

angularjsnode.jsexpressroutes

What is the reason behind TypeScript indicating that `'string' cannot be assigned to the type 'RequestMode'`?

I'm attempting to utilize the Fetch API in TypeScript, but I keep encountering an issue The error message reads: Type 'string' is not assignable to type 'RequestMode'. Below is the code snippet causing the problem export class ...

javascripttypescript

Modify content or display picture within accordion panel based on its identifier

In my view, I have a model representing a list of items. Each item has a unique ID, which is included in the H2 header tag. The details of each item are displayed in a div below the header. Initially, there is an image within the header that is set to disp ...

javascriptjqueryhtmlcssjquery-ui

What could be causing the issue with this JS code?

var feedback = {}; feedback.data = ["Great!", "See ya", "Not a fan..."]; feedback.display = function() { this.data.forEach(function(item) { console.log(feedback.display()); }); } The goal here is to showcase the content stored within the ...

javascript

Choose the ngModel option from the dropdown menu

I have a project where I need the first question from a list to be displayed automatically. I found an example of how to do this using the index, like so: <select> <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selec ...

javascripthtmlangularangular-ngmodelangular2-ngmodel

Generate some text on the following page utilizing the JavaScript function window.print()

Within my ASP.NET MVC View, I included this code snippet to display the content of my webpage: var newWindow = window.open(); newWindow.document.write(); newWindow.document.write(document.getElementById("sbmtform").innerHTML); newWindow.print(); I also ...

javascriptasp.netasp.net-mvcprinting

Unraveling complex JSON structures in Node.js

I've been working on parsing nested JSON data and here is the code I'm currently using var str = '{"key1": "value", "key2": "value1", "Key3": {"key31":"value 31"}}'; v ...

javascriptjsonnode.jsnested

Command unitTest controller yields an empty result

I am facing an issue while testing an angular directive. Despite having successfully done it in the past, I seem to have hit a roadblock today. It's probably just a silly mistake. var element, scope, controller; beforeEach(function() { angular.m ...

angularjsjasmine

Enhancing the appearance of dropdown menus for WooCommerce Variable products with custom CSS styling

I currently have a Wordpress website with WooCommerce and several variable products. Each product's variation has a dropdown menu that displays different options when clicked. My main concern is how to customize the appearance of these dropdown menus ...

javascriptcssajaxwordpresswoocommerce

Error message received when calling a function within a Vue watcher states "function is not defined"

My goal is to trigger a function in a Vue component when a prop changes using a watcher: props: [ 'mediaUrl' ], watch: { mediaUrl: function() { this.attemptToLoadImage(); } }, medthods: { attemptToLoadImage: function() { console ...

javascriptvue.jsvuejs2