Show the value in the input text field if the variable is present, or else show the placeholder text

Is there a ternary operator in Angular 1.2.19 for templates that allows displaying a variable as an input value if it exists, otherwise display the placeholder?

Something like this:

<input type="text "{{ if phoneNumber ? "value='{{phoneNumber}}'" : "placeholder='{{ language.placeHolder}}'"}}

Edit: This is my current HTML:

<input type="text"name="buyPhoneNumber" id="buyPhoneNumber" value="{{ phoneNumber }}" 
class="form-control input-lg" placeholder="{{language.phoneNumberHolder}}"
                       ng-model="buyObj.pinOrPhonenumber"
                       ng-change="buyChange();"
                       on-change-phone-number/>
javascriptangularjsangularjs-templates

Answer №1

To display dynamic content in an input field using Angular, you can utilize the ng-value directive:

<input ng-value="{{ phoneNumber }}" placeholder="{{ phoneNumber ? language.placeHolder : '' }}" />

The Angular mustache expression allows you to use a regular JavaScript ternary expression.

If you want to hide the input placeholder text with CSS when the input is focused, you can do so like this:

input:focus::-webkit-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}

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

Having difficulty in loading Socket.io client .js file?

I am currently facing an issue deploying a socket.io chat on Heroku. While the page loads successfully, the client's socket.io js file is not being downloaded, resulting in the chat functionality not working. Attached are images showcasing the error ...

javascriptnode.jsherokusocket.io

What is the best method for choosing a div element using JavaScript and altering its background color?

On my website, I have a pop-up modal with a form that contains 5 divs, each with a picture and description. I came across this JS code on w3schools that allows me to style a selected div. However, when the modal is opened, one of the divs is already pre-se ...

javascripthtmlcss

Activate jqGrid's navigation bar save icon when the ondblClickRow event is triggered

After setting the jqGrid row edit on the ondblClickRow event, how can I enable the save icon on the navigation bar when a row is double clicked? ondblClickRow: function (rowid) { jQuery(this).jqGrid('editRow', rowid, true, null, null); ...

javascriptjqueryjqgrid

Store Form Input as JSON Data File

Seeking advice on the optimal method to save submitted form data to a separate file called data.json, for future reference. The form layout is quite basic: <form> <fieldset> <label for="name">Name:</label> &l ...

javascriptjqueryjsonforms

JavaScript code returning the correct result, however, it is unable to capture all characters in the returned string

Currently, I am utilizing $.post to retrieve results from a database. The syntax I am using is as follows: $.post('addbundle_summary', {id:id}, function(resultsummary) { alert(resultsummary[0]); }) In CodeIgniter, within my model, I am retu ...

javascriptjsoncodeigniter.post

Is there a way to eliminate the filter icon from the material-table component?

I'm looking to customize my table by removing the filter icons and having blank input boxes instead. I've tried using the column prop filterCellStyle, but the icon can't be accessed since it's inline styling. import React, { Children ...

javascriptreactjsmaterial-uimaterial-table

Best practices for consuming streams using jQuery

Looking to extract VU meter data from my shoutcast server in a continuous live stream format with the following structure: "0xa5 leftVal rightVal 0xa5 leftVal ..... etc" My goal is to capture and decipher this data using JavaScript (jQuery) for animated ...

javascriptjquerystreamingshoutcaststream-processing

Multiple requests were made by Ajax

I am facing an issue with my ajax code where it is being called multiple times. Below is my php code: (While loop extracts results from a database. For brevity, I have included just the modal and dropdown menu sections.) $rezPet = mysqli_query($kon, "SEL ...

javascriptphpjqueryajax

The navigator's userAgent property is used to match specific handset identifications

When identifying users on specific devices, I use navigator.userAgent.match to detect certain phones. However, with Android devices, there are various tablets, phones, and set-top boxes to consider. So, my code snippet looks like this: if(navigator.userAg ...

javascriptphphtmlnavigator

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper: const FormLayout: React.F ...

javascriptcssreactjsnext.jstailwind-css

I am receiving a 401 error when attempting to verify the token following a successful login

I've been working on a small project utilizing VueJS, Vue Router, and Laravel for the backend. Despite several attempts, I haven't been successful in implementing navigation guards. My login component is functioning properly. Here's my log ...

javascriptvue.jsvue-router

The response detail error code 2 indicates that the post method API body check has failed within the Agora REST API, resulting in

const Authorization = `Basic ${Buffer.from(`${config.CUSTOMERID}:${config.CUSTOMER_SECRET}`).toString("base64")}`; const acquire = await axios.post(`https://api.agora.io/v1/apps/${config.agoraAppId}/cloud_recording/acquire`,{ ...

javascriptnode.jsaxiosagora.io

JavaScript - continuously update the image marked as "active"

I have a collection of 4 pictures that I want to rotate through in my web application. Each picture should have the "active" class applied to it, similar to when you hover over an image. .active, .pic:hover{ position: absolute; border: 1px solid ...

javascripthtmlcss

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

javascripthtmltypescript

Unexpected behavior observed with LitHTML when binding value to input type range

Currently, I am working on an implementation that involves using range inputs. Specifically, I have two range inputs and I am trying to create a 'double range' functionality with them. The challenge I am facing is related to preventing one slider ...

javascripthtmllit-elementlitlit-html

The UTF-8 encoded string in Node.js displays a mysterious black question mark

I am facing an issue with a CSV file that I receive from my supplier. They have encoded a string using UTF-8, resulting in black question marks appearing. Despite several attempts, I am unable to convert it back successfully. var common = req ...

javascriptnode.jsencodingutf-8iconv

Rendering data in React using the array indexRendering data in React

I'm encountering an issue in React JS where I need to display all data from a REST API with a numeric index. REST API: [ { "id": "1", "start_date": "2020-05-08 09:45:00", "end_date": "2020-05-08 10:00:00", "full_name": "mirza", "cust_full_name": "fu ...

javascriptreactjsfetch

Invoke the function when the user inputs text into the textbox

<textarea name="" id="" #text cols="30" (keydown)="WordCounter()" (change)="WordCounter()" rows="8" [(ngModel)]="user_text" placeholder="Type something here"></textare ...

javascriptangulartypescript

What steps can I take to resolve a Bootstrap form validation issue where the email field is causing the label to shift down?

I am currently troubleshooting an issue in a website using Visual Studio, which is built with VB.NET, ASP.NET, HTML, CSS, and Bootstrap. The problem lies in the input validation under the email addresses. While one validation is working fine, the validatio ...

javascriptasp.netvb.netvisual-studio

Provide a top-notch template for download using AngularJS to enhance performance

Recently, I've been working on an AngularJS application where I'm importing data from an Excel sheet. The issue I'm facing now is that I need to provide a template for the importing process. I'm seeking guidance on how to efficiently d ...

angularjsexceldownloadxlsxserve