Looking to display an input field when a different option is chosen from the dropdown menu?

I'm currently utilizing ng-if to toggle the visibility of an input box. However, whenever I refresh the page, the input box automatically appears and then hides after selecting an option. Below is my code snippet. Any suggestions would be greatly appreciated. Thanks in advance :) 

 <select id="notifyBy" 
         style="border:none" 
         class="formtext1 inputimg" 
         ng-model="singleSelect">

     <option value="option1">E-mail</option>
     <option value="option2">Instant Message</option>
     <option value="option3">Telephone</option>
     <option value="option4">None</option>

</select>

<input placeholder="Please enter phone number" 
       class="formtext1" 
       ng-if ="singleSelect === Telephone"></input>
javascriptangularjsionic-framework

Answer №1

Insight : Consider comparing the ng-model value instead of the Option text.

Try using 

ng-if="singleSelect == 'option3'"
in place of 
ng-if="singleSelect == 'Telephone'"

DEMONSTRATION

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
   <select id="notifyBy"
         style="border:none"
         class="formtext1 inputimg"
         ng-model="singleSelect">
     <option  value="option1">E-mail</option>
     <option value="option2">Instant Message</option>
     <option value="option3">Telephone</option>
     <option value="option4">None</option>
</select>
<input ng-show="singleSelect == 'option3'" placeholder="Please enter phone number" ng-model="phonenumber"
       class="formtext1"/>
</div>

Answer №2

In my opinion, the singleSelect model will hold the value of the selected option instead of the text itself. Therefore, you should compare singleSelect to the correct option value (e.g., option3) rather than trying to compare it directly to the text (e.g., Telephone).

Answer №3

Make sure to properly set up your ng-model

<select  id="notificationType" 
        style="border:none" 
        class="customSelect inputField" 
        ng-model="selectedValue"  
        ng-init="selectedValue = ''">

Answer №4

<div id="communicationMethodSelector">
        <select id="notifyBy"   
            style="border:none" 
            class="formtext1 inputimg" 
            ng-model="selectedOption">

            <option value="email">E-mail</option>
            <option value="im">Instant Message</option>
            <option value="phone">Telephone</option>
            <option value="none">None</option>
        </select>

        <br><br>

        <input placeholder="Please enter phone number" 
            class="formtext1" 
            ng-if="selectedOption === 'phone'"></input>
    </div>

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

Button from Material-UI vanishes upon being clicked

I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located afte ...

javascriptcssreactjsmaterial-ui

Having trouble resolving errors in Visual Studio Code after failing to properly close a parent function? Learn how to fix this issue

Here we have the code starting with the construct function followed by the parents function public construct() //child { super.construct; } protected construct() //parent { } The issue arises where I am not receiving an er ...

javascripttypescriptvisual-studio-codeerror-handling

Can you explain the meaning of the symbol '&$checked'?

import React from 'react'; import Checkbox from '@material-ui/core/Checkbox'; import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles'; import { orange } from '@material-ui/core/colors'; ...

javascriptreactjsmaterial-uijss

Is it possible to use Node.js child processes without carriage returns?

My Node.js script is set up to handle some database operations by creating child processes using the spawn functionality. However, I encountered a strange issue where the output stopped displaying carriage returns. Here's an example of what was happen ...

javascriptnode.jsbashmacos

I would prefer not to add another database table just to differentiate between team members and friends. Can you provide assistance with this?

Instead of creating another table named friends in Strapi and linking it to Visual Studio Code, I have opted to use a Characters table for both team members and friends. This way, I can input new data only at Characters and filter it to differentiate betwe ...

javascriptnode.jsreactjsnext.js

Calculate the quantity of rows within a specific div container

Looking at the image provided, there are multiple divs inside a main div. I am trying to figure out how many rows the main div contains. For instance, in this particular scenario, there are 5 rows. It is important to mention that the inner div is floated ...

javascriptjqueryhtmlcss

The bidirectional bindings within the component are malfunctioning

I just started learning Angular and I'm currently working on a small project. After following tutorials on two-way bindings, I attempted to implement it in my project. However, when I try to set values in the HTML for my component, it doesn't see ...

javascriptangulartypescript

The document.write function in JavaScript is malfunctioning

I've been attempting to utilize the javascript function document.write to incorporate an external css file in my template. However, I am aiming to achieve this using Twig, like so: document.write('<link href="{{ asset('bundles/activos/cs ...

javascripthtmlcsssymfonytwig

Troubleshooting: Angular's 'orderBy' not functioning properly when dealing with intricate ng-options arrangements

Having trouble with the orderBy function in conjunction with a complex ng-options statement. The sorting of the <select> options is not working as intended: ng-options="p.proxyType for p in proxyOptions track by p.proxyType | orderBy:'proxyTyp ...

angularjs

Incorporate a sleek Vueitfy user interface seamlessly into your current website

Recently, I put together a sleek user interface for a web application with the help of Nuxt.js and Vuetify.js (which utilizes Vue.js code). Although my design is top-notch, I now face the challenge of integrating it into an existing website that does not ...

javascripthtmlvue.jsvuetify.jsnuxt.js

What is the best way to show a message of success once the user has been redirected to the homepage?

Currently, I have a registration form utilizing AJAX and PHP for validation. Error messages can be displayed on the registration page if the user does not correctly fill out the form. Upon successful registration, the user is redirected back to the home pa ...

javascriptphpjqueryajax

Consistent manipulation of the DOM through the Drag/Touchmove event

Seeking to incorporate Mobile Components through native Javascript and AngularJS. During my work on developing a Pull To Refresh directive for AngularJS, I utilized the touchmove event on a UL list. The goal was to pull a concealed div over a list with cu ...

javascriptcsshtmlangularjs

"Encountering a Heroku error due to an oversized cookie while using Express.js and

Being unsure of the exact cause, I am encountering an issue with Heroku that gives me the error message t=error code=H25 desc="HTTP restriction: oversized cookie" whenever I attempt to authenticate myself with Discord OAuth. Interestingly, this problem onl ...

javascriptexpresshttpherokucookies

Launching an Angular application from the local server

I have successfully deployed an Angular frontend on a server. It is functioning well, with three scripts: /runtime.0fad6a04e0afb2fa.js /polyfills.24f3ec2108a8e0ab.js /main.a9b28b9970fe807a.js My goal is to start this application in Firefox without ...

javascriptangularfirefox

Eliminate event listener using unique identifier

Is there a way to retrieve information about all event handlers for an element in JavaScript? $._data($('#element_id')[0], "events"); This will provide a detailed record of every event handler attached to the element. 0: {type: "c ...

javascriptjqueryevents

Organizing into distinct categories using Angular

I'm a beginner in the world of Angular and programming, seeking guidance on how to learn. I have an HTML page with 5 tabs: "Who," "What," "Where," "When," and "Events." The code snippet below showcases my current setup. Can anyone provide assistance o ...

javascriptjsonangularjs

Troubleshooting Checkbox Problems on Internet Explorer 6

In order to have checkboxes generated dynamically for a pop-up window utilizing AJAX, I am using Javascript. Furthermore, when a button is clicked, a function needs to be executed that checks all the checkboxes before the pop-up appears. The web pages bei ...

javascriptjspinternet-explorer-6checkbox

Develop a navigation system with forward and backward buttons to easily navigate between

I'm currently delving into angular and striving to implement a next/back button for showcasing various views. Within my repository, I have a template named example.html <h1>{{ message }}</h1> which is utilized by multiple controllers: ...

angularjs

Using ngFor in Angular 2-5 without the need for a div container wrapping

Using ngFor in a div to display an object containing HTML from an array collection. However, I want the object with the HTML node (HTMLElement) to be displayed without being wrapped in a div as specified by the ngFor Directive. Below is my HTML code snipp ...

javascriptarraysangularhtmlngfor

What is the reason behind the browser crashing when a scrollbar pseudo-class is dynamically added to an iframe?

1. Insert a new iframe into your HTML: <iframe id="iframe-box" onload=onloadcss(this) src="..." style="width: 100%; border: medium none; "></iframe> 2. Incorporate the following JavaScript code into your HTML file ...

javascripthtmlcssgoogle-chromeiframe