In Angular Typeahead, the model is used as an identifier and the Text represents the name in the array object

I'm currently utilizing the Angular UI Typeahead directive available at this link. Can someone provide guidance on how to assign a model as an id and display text as a name in it? I have attempted the method below but encountered issues. Any suggestions on how to proceed would be greatly appreciated. Thank you.

Note : To test, please input either a or k into the code pen provided below.

CodePen Demo

JS Snippet

 var states=[{'id':1,'name':'Alabama'},{'id':2,'name':'Kansas'}]

HTML Structure

    <input name="states" id="states" type="text" placeholder="enter a state" ng-
model="selected" typeahead="a.id as a.name for a in states | filter:$viewValue" 
class="form-control">
javascriptangularjstypeahead

Answer №1

When attempting to only include the selected state id in the ng-model, you encounter an issue where only the id of the selected state appears in the input field as the ng-model only contains the id value.

Instead of simply inserting the id into the ng-model, it is necessary to select the entire object. This way, when a state is chosen, the expression a as a.name will display only the name from it. You can then utilize selected.id to pass the state id whenever needed.

Markup

<div class="form-group">
  <label for="states">Search for US States</label>
  <pre>Model: {{selected | json}}</pre>
  <input name="states" id="states" type="text" 
     placeholder="enter a state" ng-model="selected" 
     typeahead="a as a.name for a in states | filter:$viewValue" 
     class="form-control">
</div>

Forked Codepen

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

Combining ng-repeat and ng-model in a controller

Hello everyone, I'm a newbie here and also new to AngularJS. I am currently working on creating a form using ng-repeat, but I'm struggling to understand some of the angular concepts. Here is the JS in my controller: $scope.myCurrentAssets = { ...

angularjsangularjs-ng-repeat

Adding a Timepicker to a Datepicker on a jsp webpage with javascript

I am working on a JSP page that includes a date picker. I want to enhance this datepicker by adding a start time and end time within the calendar itself. How can I achieve this? Additionally, I need to implement validation ensuring that the start time is a ...

javascriptjqueryjsptimepicker

What is causing my Li elements to be unchecked in REACT?

Why is the 'checked' value not changing in my list? I'm currently working on a toDo app Here are my State Values: const [newItem, setNewItem] = useState(""); const [toDos, setToDos] = useState([]); This is my function: funct ...

javascriptreactjs

the three.js code runs smoothly on JSfiddle, but it does not seem to be working properly

Check out this basic three.js code snippet for generating custom geometry http://jsfiddle.net/67Lgzjpb/. After attempting to run this code directly in my browser (not via JSFiddle), an error message pops up: TypeError: geom.computeCentroids is not a funct ...

javascriptthree.jsjsfiddle

Utilizing Angular JS within a callback function from an external source

After updating my Angular 1.3 application to version 1.6, I noticed that a couple of functions are no longer working properly. These functions are used within a vanilla JS script called from a controller to navigate to another controller and view. Below ...

angularjs

Tips for validating multiple inputs of the same type with identical names in JavaScript

I have limited experience with Javascript and am facing an issue with a HTML form that contains multiple input types with the same names occurring more than once. My goal is to validate the form before inserting the data into the database. I have managed t ...

phpjavascripthtmlformsvalidation

What is the best way to organize products based on the proximity of users using MongoDB's Geospatial Queries

I'm currently working on a web application that connects users with neighbors to buy and sell products. The app is built using node.js, JavaScript, mongodb, and mongoose. My main issue lies in sorting the products. I want to display products from nea ...

javascriptnode.jsmongodbmongooseproduct

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

I have been working on a Contact Form that integrates Google Scripts. Everything seems to be functioning well as it successfully sends emails and formats them properly in my inbox. However, there are two issues that I am encountering: -I want to exclude t ...

javascriptjqueryhtml

Is there a way to dynamically alter the theme based on stored data within the store

Is it possible to dynamically change the colors of MuiThemeProvider using data from a Redux store? The issue I'm facing is that this data is asynchronously loaded after the render in App.js, making the color prop unreachable by the theme provider. How ...

javascriptreactjsreact-reduxmaterial-uiredux-saga

Tips for always focusing on a textarea within an Angular UI modal when opening the modal

I am facing an issue with setting focus to a textarea within an angular ui modal. I need the focus to be set when the modal is made visible, but it cannot happen during document load as it only works the first time the modal opens. Furthermore, the modal ...

angularjsmodal-dialogfocusangular-ui-bootstrapdirective

Utilize Bootstrap4 to position content above the navigation icon

I need assistance to modify my code so that it will have the following appearance: I successfully created a navigation bar icon and inserted the logo, but I am struggling to position the data above the navigation icon: My current code: <nav class="n ...

javascripthtmlcssbootstrap-4navigation

Utilizing AngularJS to filter prices within a specific range using a button

I am new to using angularjs and I am working on implementing a price range filter with nouislider for a list of products with different prices. I want the filtering to happen only after the user clicks on the filter button. Below is the HTML code for my " ...

javascriptangularjsfilteronclickrange

NextJs only displays loading animation once

Currently, I am developing an app using Next.js and I am facing a challenge with implementing a loading animation. The animation I am attempting to incorporate consists of three bouncing balls which display correctly. When I launch the Next.js app with n ...

javascriptcssreactjsnext.js

Implement Next.js deployment on NGINX server with a 403 forbidden error

I am currently utilizing Next.js for the frontend and Django for the backend. During development, everything is functioning properly. However, when transitioning to production, I am encountering a 403 Forbidden Error related to /_next/static/chunks. It app ...

javascriptnode.jsreactjsnginxnext.js

How to add multiple entries using Node.js and Tedious

I am currently working with an array of customer objects that I need to insert into a SQL database. These customer objects are retrieved from the request data. For this task, I am utilizing Tedious for handling the request and Tedious Connectionpool to ma ...

javascriptsqlnode.jsfor-looptedious

Searching for and replacing anchor tag links within a td element can be achieved using PHP

I am currently customizing my WordPress website and I need to update the URL (product link) of the "product-image" on the "cart" page. I have the following dynamic code: <td class="product-name" data-title="Product"> <a href=&q ...

javascriptjquerywordpress

Utilizing a Firebase function with Angular

I created the following function: retrieveLikedProperties(): AngularFirestoreCollection<any> { return this.afs.collection('users', ref => ref.where('uid', '==', this._auth.currentUserId) .where(&a ...

javascriptangulartypescriptfirebase

Why isn't res.send() in Node.js sending the message?

Despite numerous attempts, I am unable to send my response message. It was working briefly, but after some code changes, it stopped functioning. Can anyone provide a solution to this challenging issue? exports.listBoth = function(req, res) { ...

javascriptnode.jsexpressmongoose

Which is better: specifying a name in window.open() or using replace?

If the current window is www.myparent.com and a button labeled "a" is clicked, it triggers the following function window.open('children','same','',??). Subsequently, a new page will open as www.myparent.com/children. On the o ...

javascriptdom

Retrieve a remote text file using vanilla JavaScript instead of relying on jQuery

Currently, I am aiming to retrieve the content of a text file using JavaScript for parsing purposes. Although I previously relied on jQuery and JSONP for this task, I now prefer to achieve it without any framework. Despite numerous attempts, none have bee ...

javascriptajaxxmlhttprequest