Integrating various object properties in Angular's select ng-options: A comprehensive guide

I need to merge text and number properties from JSON to display as select options values by default. The expected output should be: 000.000.0001 - Chicago

HTML:

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">  
  <select ng-model="model.selected" ng-options="item.ID as item.Title for item in items"></select>
  <p>Selected: {{model.selected}}</p>  
</body>
</html>

JS:

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

app.controller('MainCtrl', function($scope) {
  $scope.items = [
       {ID: '000.000.0001', Title: 'Chicago'},
       {ID: '000.000.0002', Title: 'New York'},
       {ID: '000.000.0003', Title: 'Washington'}
    ];  
});

Answer №1

Here is a method to assign multiple values using the following approach:

  <select ng-model="model.selected" ng-options="item.ID  as item.ID + '-' + item.Title for item in items"></select>
  <p>Selected: {{model.selected}}</p> 

angular.module("app",[])
.controller("ctrl",function($scope){

  $scope.model = {
    selected : '000.000.0001'
  }
$scope.items = [
       {ID: '000.000.0001', Title: 'Chicago'},
       {ID: '000.000.0002', Title: 'New York'},
       {ID: '000.000.0003', Title: 'Washington'}
    ];  
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="model.selected" ng-options="item.ID  as item.ID + '-' + item.Title for item in items"></select>
  <p>Selected: {{model.selected}}</p>  
</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

Guide on uploading a file to Pinata directly from a React application

I keep encountering the 'MODULE_NOT_FOUND' console error code. Displayed below is the complete console error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f4b4d564b5a4d4d5e4c1251505b5a7f0e110f110f">[email& ...

The process of automating e-signature input with Selenium

Is there a way to automate e-signature input in Selenium? I attempted using the action class to draw a line on the canvas object. Below is the code I used: Actions actionBuilder=new Actions(driver); Action drawOnCanvas=actionBuilder ...

What is the best way to update an object within a deeply nested array of objects using lodash?

I am facing a challenge in my React JS application where I have an array of objects that I need to dynamically modify. Here is the structure of my array : sections: [ { id: 'e9904688-fd8a-476d-8f46-930bc4d888d1', ...

What is the process for triggering a PHP function when a form element is clicked in a webpage?

Currently, I am trying to implement a jQuery colorbox on my webpage which appears over a <select> drop-down list. My goal is to trigger an AJAX call every time a new option is selected from the drop-down. Even though I have written the following cod ...

Issues with jQuery focus function in Internet Explorer 11

Is there a way to set the focus on an anchor tag using the URL? Anchor Tag: <a id='714895'>&nbsp;</a> URL: jQuery Code: try { if(document.URL.indexOf("?ShowAllComments=True#") >= 0){ var elementClicked = "#" +location.hre ...

Encountering module resolution issue following npm-link for the shared component repository

Attempting npm-link for the first time to establish a shared component repository, and encountering an issue. The project seems to be linked correctly based on this message: /Users/tom.allen/Development/main/project/node_modules/@linked/project -> /usr ...

Encountering a 404 error when trying to reload the page?

My React Router is functioning properly in the development environment. Here's what I implemented in Webpack Dev Server: historyApiFallback: { index: 'index.html', } Now, when transitioning to production mode, I wanted to replicate the ...

Issue with Electron: parent window not being recognized in dialog.showMessageBox() causing modal functionality to fail

Struggling with the basics of Electron, I can't seem to make a dialog box modal no matter what technique I try. Every attempt I make ends in failure - either the dialog box isn't modal, or it's totally empty (...and still not modal). const ...

Steps To Successfully Deploy a Project on Heroku Platform

My project is divided into two parts, one in Node.js for the backend and the other in Angular for the frontend. The backend consists of an API and MySQL connection implemented using Node.js, while the frontend involves UI coding with Angular. ...

Whenever I work with NPM, node.js, and discord.js, I consistently encounter the error message stating "TypeError: Cannot read property 'setPresence' of null."

I'm developing a Discord bot with NPM and discord.js, but I keep encountering an error that says "TypeError: Cannot read property 'setPresence' of null". Here is my bot code: const Discord = require('discord.js'); const { prefix, ...

Find the current elapsed time using Wavesurfer in real time

I am currently utilizing the waveSurfer library created by katspaugh for playing audio files. In order to display 'elapsed time / total time', I have written code in the following manner: waveSurfer.on('play', function() { $scope.g ...

Issue encountered while integrating Angular with Grails

Below is the content of my index.gsp file <!DOCTYPE html> <html ng-app="myApp"> <head> <title>my app</title> </head> <body> <input type="text" data-ng-model="test"/> {{test}} </body> <script src ...

`Discover the latest version of Tailwind using JavaScript or PHP`

My setup includes Laravel v8.81.0 (PHP v8.1.2), Vue v3.2.30, and Tailwind https://i.sstatic.net/fVbJB.png I am looking to fetch the Tailwind version in JavaScript similar to how I can get the Vue version using: //app.js require('./bootstrap'); ...

Is there a way to retrieve the id of every post on my page?

Is it possible to send multiple post ids in JavaScript? I have successfully sent the first post id, but now I need to figure out how to send each individual post id. When inspecting the elements, I see something like this: <div data-id="post_1">< ...

Modify the index in the creation of a json

I am trying to create a JSON object using the code below: var myJSONObject = []; var id = "1", value = "I'm a value !"; myJSONObject.push({id:value}); When I display this construction, it shows: [{"id":"I'm a value !"}] However, I want it to d ...

There was a syntax error found in the JSON input when $.ajax() was utilized, resulting in

I'm currently working on a website that requires implementing a chat feature. The project is running locally, but I've encountered an error: SyntaxError: Unexpected end of JSON input Despite searching online for a solution, nothing seems to w ...

Utilizing Axios to pass multiple values through a parameter as a comma-separated list

Desired query string format: http://fqdn/page?categoryID=1&categoryID=2 Axios get request function: requestCategories () { return axios.get(globalConfig.CATS_URL, { params: { ...(this.category ? { categoryId: this.category } : {}) } ...

How can the name of an element be passed as an argument to a function called by that element within a Vue component?

I'm currently developing an interactive SVG map inspired by the one found on the CDC page. In my SVG map component, I have implemented multiple path elements that each contain a unique name attribute representing the corresponding state. Additionally, ...

Uncovering the hidden gems within a data attribute

Trying my best to explain this clearly. What I have is a data-attribute that holds a large amount of data. In this case, I need to extract each individual basket product ID and display them as separate strings. The challenging part for me is locating thi ...

socket.io establishes several sockets for each connection

At times, when the server is experiencing some load, connecting to the page may result in multiple sockets being created. If there is significant lag, the connection may never be established while additional sockets are generated every second indefinitely. ...