Customize the label of the model in AngularStrap's typeahead ng-options to display something

Utilizing AngularStrap typeahead for address suggestions, I am facing an issue where I want to set the selected address object as my ng-model, but doing so causes me to lose the ability to display just one property of the object as the label.

Here is an example of the returned object:

{ formatted: '1001 Main St', geo: { lat: '123', lng: '234' } }

Within the view:

<input type="text" class="form-control" ng-model="item.venue" ng-options="address as address.formatted for address in getLocation($viewValue)" placeholder="Enter address" bs-typeahead>
 Venue Object: {{ item.venue }}

I expected the above code to work, but unfortunately it does not assign "formatted" as the label value - it appears blank after selection. However, using the following workaround assigns only the formatted property to the model:

<input type="text" class="form-control" ng-model="item.venue" ng-options="address. address.formatted as address.formatted for address in getLocation($viewValue)" placeholder="Enter address" bs-typeahead>

Fiddle: http://jsfiddle.net/cyberwombat/30e63qea/1/

javascriptangularjs

Answer №1

It seems like you are looking to update the input field to display the label or obj.label of the selected obj, while still keeping the selected information intact.

To achieve this, you can listen for the $on selected event and append .label:

  $scope.$on('$typeahead.select', function(v,i){
    console.log(v,i);
    $scope.selected.label =  $scope.selected.formatted_address;
  });

You can check out a live example on Plunker

Answer №2

Upon inspecting the source code, it seems that the AngularStrap typeahead is designed to prioritize the "label" property when present in an object. This means that if a "label" property exists, it will be used.

Check out the updated Fiddle here: http://jsfiddle.net/cyberwombat/nur5oqqa/2/

Therefore, the object should follow this format:

{ label: '1001 Main St', geo: { lat: '123', lng: '234' } }

Make sure your code looks like this:

<input type="text" class="form-control" ng-model="item.venue" ng-options="address as address.label for address in getLocation($viewValue)" placeholder="Enter address" bs-typeahead>

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

Learn how to display JSON data sent from the server on a webpage

I'm just starting out with jquery. I have an api called '/categories' that gives me a json object of categories. The response looks like this: [ { name: "Laptop deals", slug: "laptop-deals", imageURL: "image.jpg", id: 1 }, { name: "Fashion ...

javascriptjqueryjson

You are unable to insert a variable within the channels.get() method in discord.js

Attempting to troubleshoot this issue has been quite frustrating. Despite my efforts, it seems that something is not working as expected. I can't help but wonder if I am simply overlooking a simple mistake due to fatigue. Here's the scenario: It ...

javascriptnode.jsdiscorddiscord.js

Tips for utilizing promises to create automated waiting for a function's completion in node.js/javascript

When I instantiate a module, it triggers numerous asynchronous functions. var freader = new filesreader(); // <-- this triggers multiple async functions var IMG_ARRAY = freader.get_IMG_ARRAY(); // <-- i retrieve the array where content is store ...

javascriptnode.jsasynchronous

Is Aurelia-Fetch reliant on whatwg-fetch as a dependency in its codebase?

I am currently in the process of updating my Aurelia project from a beta version to the March version. One of the issues I encountered is: Cannot locate name 'Request'. Searching online led me to this problem on GitHub: https://github.com/au ...

javascripttypescriptnpmaureliafetch-api

What is the best way to maintain the previous input value on page refresh in Vuejs?

In my development project, I am utilizing the Laravel and Vue.js technologies. I am facing an issue where I need to set the input value to its previous old value when either refreshing the page or navigating back to it in a Vue dynamic component. Here is ...

javascriptjquerylaravelvue.jsvue-component

Is it possible to submit a POST method without using a form?

I am looking to create a button that functions similar to the "Follow" buttons found on social networks. The challenge I face is that I need to refresh the page when the user clicks the button, as the content of the page heavily depends on whether the user ...

javascript

Getting the button element in Angular when submitting a form

My web page contains multiple forms, each with a set of buttons. I want to incorporate a loading spinner on buttons after they are clicked. When using a regular click event, I am able to pass the button element: HTML <button #cancelButton class="butto ...

javascriptangular

Tips for displaying ajax search results in Laravel views

My attempt to send a JSON response via AJAX to my Laravel view is not yielding any successful results. public function viewMasakanAjax(Request $request) { if($request->ajax()) { $alberMasakan = Masakan::where('alber_nama_masakan&ap ...

javascriptjqueryjsonajaxlaravel

Integrating LinkedIn's oauth2 into an Ionic/AngularJS frontend for a hybrid mobile app, while utilizing ExpressJS, PassportJS, and MongoDB on the backend

My backend setup is on AWS and running an express webserver with configuration for passportjs. I aim for all users to log in via LinkedIn on the frontend. When they click the button, it triggers a http GET command using Angular's $http.get service. T ...

angularjsnode.jsoauth-2.0ionic-frameworkpassport.js

Optimal method for displaying the children component twice in Next.js

In order to create an infinite slider, I had to duplicate the data within my component. The data consists of an array containing a maximum of 20 items, each with an image. The slider is functioning perfectly. Although it may seem unconventional, it was n ...

javascriptreactjsnext.jsreact-hooks

What is the best way to add new input fields dynamically using the push() function in AngularJS?

I'm currently working on implementing an add more field feature in angularjs. Here is the code that I am using: Javascript <script> function FruitsController($scope){ var div = 'Apple'; $scope.fruits= ...

javascriptangularjs

Automatic Expansion Feature for HTML Tables

http://jsfiddle.net/bzL7p87k/ In my table, placeholders are filled with special words. However, what happens when I have more than 4 rows? For instance, if there are 21 placeholders for 21 rows? What I mean is this: I only have one row with a placeholder ...

javascriptjqueryhtmlmysqlcss

Receiving communication without the need for port forwarding

My goal is to establish a system where a server can send messages to clients at any given time, ensuring that when a message is sent, it is received almost immediately (ideally within 1 second or less). I am looking for a way to achieve this without having ...

javascriptnode.jsnetwork-programming

Angular 1.5: Exploring the World of Component Styles

How can I implement component styles in Angular 1.5? Specifically, I am looking for: automatically generated classes for uniqueness styles that do not impact child or parent components I have set up webpack and es6, but so far have been unsuccessful in ...

angularjswebpackcomponents

The hyperlink and criteria provided are accurate, however, the webpage remains stagnant

My login page is supposed to redirect to the contact confirmation page when I receive a 200 response from the server, but it's not working. Can you help me find my mistake? const [form, setForm] = useState({}); async function checkLogin() { tr ...

javascriptreactjsreact-router

Node.js server experiencing delays due to V8 processing constraints

REVISED I am currently running a nodeJS http server designed to handle uploads from multiple clients and process them separately. However, I have encountered an issue where the first request seems to block any subsequent requests until the first one is co ...

javascriptnode.jshttpasynchronousv8

Attempting to retrieve information from my MongoDB database and populate it into a <table> structure on a web page

My objective is to extract data from a MongoDB database and display it in an HTML table. Specifically, I am trying to retrieve information from the hangman database's players collection, which contains fields for name and score. Can anyone help me ide ...

javascriptjquerynode.jsmongodb

Achieving success with URL parameter service implementation

As I plan to develop a service that manages URL parameters in AngularJS, I currently have two types of parameters to consider. Single valued parameters &param=myValue Multi valued parameters &param=lorem,ipsum,dolor I am undecided on whether I s ...

angularjsarchitecture

Error encountered while sending AJAX request with JSON data type

Is it possible to submit a Form using ajax with the jsontype? Suppose I have 5 fields in the form, where 4 of them are normal textboxes and one field contains JSON. When trying to send this data via ajax, an error is thrown. How can I resolve this issue? ...

javascriptjqueryjsonajax

Setting up node.js for angular - serving static files with connect.static and running unit tests

Currently, I am in the process of setting up a basic node webserver by following a tutorial outlined in Pro AngularJS published by Apress. Node.js along with both the connect and karma modules have been successfully installed on my system. During the ins ...

javascriptangularjsnode.jsnpmkarma-runner