Discover the chosen option using Angular Bootstrap's TYPEAHEAD extension and ng-change handler

Why am I having trouble retrieving the correct selected typeahead value using the ng-change function?

This is the code snippet:

<input 
   type="text" 
   ng-model="asyncSelected" 
   placeholder="Locations loaded via $http"
   typeahead="address for address in getLocation($viewValue)" 
   typeahead-loading="loadingLocations" 
   class="form-control" 
   ng-change="change(asyncSelected)">

The issue is that the variable asyncSelected always returns the string that I typed, not the one selected via typeahead. You can see the problem in this Plunkr example. Just type something in it. I forked it from the official documentation of angular-ui-bootstrap.

VIEW PLUNKR DEMO HERE

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

Answer №1

If you want to trigger a function when a value is selected, the typeahead-on-select attribute can be quite handy. Give it a try with the following code snippet:

<input type="text" 
  ng-model="asyncSelected" 
  placeholder="Locations loaded via $http" 
  typeahead="address for address in getLocation($viewValue)" 
  typeahead-loading="loadingLocations" 
  class="form-control" 
  typeahead-on-select="change(asyncSelected)">

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

Utilize emit to distribute / allocate a variable

I have some variables stored in a file called server.js (and they tend to change frequently). My goal is to pass these variables to client.js whenever the client sends a request (triggers the 'validate' event). Even though the event is triggered, ...

javascriptnode.js

Node.js refusing to acknowledge the get request handler for the homepage of the website

My Node.js server setup is quite simple: const express = require('express'); const app = express(); const http = require("http"); const path = require('path'); const favicon = require('serve-favicon'); // Public fil ...

javascriptnode.jsexpress

Adjusting diagram size based on screen width using Bootstrap and jQuery

I recently created a diagram that adjusts its size according to the screen width. However, when I implemented this code on my page, I encountered an issue where the final circle or glyph would drop to the next line instead of staying on the same line as in ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Fetch() function is triggering a resource blockage due to CORS restrictions

App.js : import React from 'react'; import './App.css'; class App extends React.Component { state = { character : {} }; componentDidMount() { fetch("https://jobs.github.com/positions.json?description=basf") .the ...

javascriptreactjs

Refreshing Components upon updates to session storage - Angular

Currently, I am in the process of developing a build-a-burger website using Angular. The ingredients and inventory need to be updated dynamically based on the selected location. Users can choose the location from a dropdown menu in the navigation bar. The ...

angularangularjstypescriptrerender

verifying changes in data with ReactJS

In my coding project, I have a GUser class that is designed to store data from the GitHub API and process it: import axios from "axios"; export default class GUser { constructor(userName) { this.userName=userName; this.getUserData(this ...

javascriptreactjsasynchronousaxios

Retrieve the Json data only when the status is confirmed as OK, then proceed to the designated URL

Here is my current controller code: angular .module('MyApp') .controller('CtrlName', CtrlName); function CtrlName($scope, $http){ $http.get('https://url.myService.com/SpecificService').success(function(data) { $l ...

angularjsjsonresponse

Getting the value of elements with the same id in JavaScript can be achieved by utilizing the getElement

When I click on the first delete link, I want to display the value from the first input box. Similarly, when I click on the second delete link, I want to show the value from the second input box. Currently, it is always showing the value from the first del ...

javascriptjqueryhtmlajaxxmlhttprequest

I'm having trouble getting my backend array to display in the frontend on ReactJS - any advice?

I'm working on a project where users can submit posts with titles and descriptions. Once submitted, the post data is stored in an array called submittedPosts on the backend. However, I'm facing an issue when trying to display all the submitted p ...

javascriptnode.jsreactjsexpresssubmit

Error notifications for Angular Material input validation

I am currently building an application using Angular-Material and I am facing an issue with input validation for required fields in a form. I tried following the guidelines on the angular-material website under errors, but despite entering data in the fiel ...

angularjsvalidationbindingpugangular-material

Nesting Multiple Click Directives in AngularJS

I am facing a situation where I have two directives in play – one is enclosed within a specific view, while the other is applied to the container of that view. <div id="content" data-panel='{{ pNav }}' close-content> <div class="i ...

javascriptjqueryhtmlangularjsangularjs-directive

What are the steps for incorporating airbrake into my Nodejs application?

Currently, my project is built using a combination of Node and AngularJs, and I am looking to integrate Airbrake. Despite researching extensively, I am still unsure about the best approach for this integration. I have come across methods involving node, ...

angularjsnode.jsexpressairbrake

The button remains active in Internet Explorer 10 and cannot be disabled

The button has been specified as <input type="button" id="disable" disabled="disabled" value="Upload" /> However, the appearance of the button does not show it as disabled in Chrome, Firefox, and Safari. Additionally, in Internet Explorer, the bu ...

javascriptjqueryhtml

Compatibility issues between Sinon, Require, and Backbone causing errors

Currently, I am following a tutorial on how to test Backbone applications using Jasmine and Sinon. I am attempting to stub out an object, and here is the code I have so far: define(function(require) { var sinon = require('sinon'); beforeEach ...

javascriptbackbone.jsrequiresinon

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

javascripthtmlarraysangularjs

Encountered an error while attempting to convert react-native-reanimated-65-jsc.aar

ERROR: App installation failed after 19 seconds Failed to install the app. Ensure your Android development environment is properly set up. Follow this link for setup instructions: https://reactnative.dev/docs/environment-setup. Erro ...

javascriptandroidreactjsreact-native

How can I conditionally disable a button in Vue.js using an if statement?

Can someone help me figure out why all my buttons are getting disabled when I only want one to be disabled? Here is the code where I created a counter with vue.js: <body> <div id="app"> <button @click="co ...

javascriptvue.js

Make the text appear hazy as it moves behind a see-through object

I'm attempting to create a blurred text effect that transitions behind a semi-transparent container label. I've experimented with combining the backdrop-filter and filter properties along with the filter function blur(), but I haven't been ...

javascripthtmlcssblur

What is the best way to determine when both the async queue and filestream have completed their tasks

I've encountered a minor issue while working with async.queue and filestream. In my current setup, the filestream completes its task I mark fileRead as true however, at this point, the queue is empty and drain has already been called this situation ...

javascriptnode.jscallbackstreamasync.js

Updating and adding fields within a nested object in mongoDB

In my mongoDB document, I am looking to insert additional data: { "_id" : "7KufvMQFyyeuKFP68", "target" : { "10" : "true", "id" : "ePce6fBAHx9KeKjuM" } } I want to update the existing fields in target or add new ones if needed ...

javascriptmongodb