What is the proper way to structure the ng-options syntax in AngularJS?

I received an array from a REST service and I am attempting to generate a dropdown menu based on that data.

Check out the jsfiddle example here

$scope.reasons = [{
"languageLanguageId": {
    "languageId": 1,
    "lastUpdate": "2015-05-08T11:14:00+03:00",
    "name": "eng"
},
"returnText": "reason1",
"returnreasonId": 1}, {
"languageLanguageId": {
    "languageId": 1,
    "lastUpdate": "2015-05-08T11:14:00+03:00",
    "name": "eng"
},
"returnText": "reason2",
"returnreasonId": 2}, {
"languageLanguageId": {
    "languageId": 1,
    "lastUpdate": "2015-05-08T11:14:00+03:00",
    "name": "eng"
},
"returnText": "reason3",
"returnreasonId": 3

}];

HTML

<div class="col-md-10">
<select ng-model="reasons" ng-options="p.reason as (p.returnText + '('+p.returnreasonId+')') for p in reasons"></select>
</div>


<div class="col-md-10">
    <select ng-model="reasons" ng-options="p.returnreasonId as p.returnText for p in reasons"></select>
    </div>
javascriptangularjsng-options

Answer №1

Do not forget to include ng-app and the controller declaration:

<div ng-app>
   <div  ng-controller="TodoCtrl">
         <div class="col-md-10">
            <select ng-model="reason"  ng-options="p.returnreasonId as p.returnText for p in reasons"></select>
             {{reason}}
        </div>
    </div>
</div>

Also, make sure to add the controller:

function TodoCtrl($scope) {
$scope.reasons = [{
    "languageLanguageId": {
        "languageId": 1,
            "lastUpdate": "2015-05-08T11:14:00+03:00",
            "name": "eng"
    },
        "returnText": "reason1",
        "returnreasonId": 1
}, {
    "languageLanguageId": {
        "languageId": 1,
            "lastUpdate": "2015-05-08T11:14:00+03:00",
            "name": "eng"
    },
        "returnText": "reason2",
        "returnreasonId": 2
}, {
    "languageLanguageId": {
        "languageId": 1,
            "lastUpdate": "2015-05-08T11:14:00+03:00",
            "name": "eng"
    },
        "returnText": "reason3",
        "returnreasonId": 3
}];
}

Note: In ng-model, specify where to store the selected value, while in ng-options, list all possible selection values. I hope this clarifies things for you.

http://jsfiddle.net/U3pVM/15559/

For further information, refer to the documentation:

https://docs.angularjs.org/api/ng/directive/select

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

Show all outcomes when a checkbox is not checked using AngularJS filters

I find myself stuck on a seemingly simple task that's causing me some frustration. Within an AngularJS app, I have a dictionary of values that I need to filter using a checkbox. When the checkbox is checked, I want to display only the elements with & ...

angularjscheckboxfilter

What strategies can be used to stop elements from reverting to their original state?

Hey there, I'm currently experimenting with animation and trying to create a cool two-step effect: 1. elements falling down and 2. pulsating on click. However, I've run into an issue where after the clicking action, the elements return to their o ...

javascriptanimationcss-animations

Angular: Defining variables using let and var

When working with TypeScript and JavaScript, we typically use either let or var to declare a variable. However, in Angular components, we do not use them even though Angular itself uses TypeScript. For instance, export class ProductComponent implements OnI ...

javascriptangulartypescriptoop

Is jQuery .ajax not able to make CORS request while Native XMLHttpRequest() successfully does?

When I use the vanilla XMLHttpRequest() object to make a CORS request, it works perfectly fine. However, when I try using the jQuery.get() function, it tells me that cross-origin requests are not allowed. This is confusing because $.get() is built on top o ...

javascriptjqueryajaxcors

retrieving data from Redis with the help of Node.js

I'm having trouble with the code snippet below. Despite setting values for the left_label and right_label variables in Redis, they always seem to return as "true". I suspect this is due to the client.get function returning true when successful. How ca ...

javascriptnode.js

Performing an Ajax post request to a PHP script in order to retrieve a PHP variable using XMLHttpRequest

I am looking to dynamically update my table using JavaScript every few seconds. Currently, I have set up an AJAX post request to my update.php file and trigger it if it is set. Then, I execute a MySQL query to retrieve the data and store the resultset in ...

javascriptphpajaxjsonxmlhttprequest

Adding JavaScript to dynamically loaded AJAX content

I'm new to AJAX and JavaScript and unsure of how to get it working. Here is the website: When you click on portfolio images, the details load via AJAX. I want to create a slideshow for projects with multiple full-sized images. However, due to the co ...

javascriptjqueryhtmlajaxwordpress

Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

I've been trying to center a div element with the mouse cursor, following its movement. However, the current code I have offsets the positioned div from the cursor instead of aligning it perfectly. PROCESS The concept behind my code is to display an ...

javascriptjquerycss

Display a hyperlink in an iframe on the main page from a different domain using JavaScript

I'm currently using Angular with Wirecard as my payment provider. When I need to add a payment, I open an iframe that directs the user to the Wirecard site to accept the payment. Once the user clicks accept, I provide a link back to my site from Wirec ...

javascriptangularjsiframe

Combining two request.get functions into a single one

Is there a way to combine these two functions into one? I have two APIs: /page1 and /page2. My goal is to merge the two arrays into one because the GitHub API only displays 100 objects per page. request.get({ url: 'https://api.github.com/users/an ...

javascriptnode.jsexpress

JQuery form serialize not triggering in Internet Explorer

I've encountered an issue with a form inside a jQuery dialog that is not submitting properly in Internet Explorer. The form functions correctly in Chrome and Firefox, sending data to my MVC controller without any issues. However, when using IE, it on ...

javascriptjqueryajaxinternet-explorer

Develop a pair of jQuery plugins that are able to communicate with one another

My mind is currently in disarray. I am interested in developing two unique jQuery plugins: A tab plugin A slider plugin. These plugins need to be able to communicate with each other. For example, clicking on a tab should activate the corresponding index ...

javascriptjquerypluginsjquery-eventsextends

Generating and Retrieving Dynamic URL with Jquery

My web page named single-colur.html has the ability to handle various query strings, such as: single-colour.html?id=1 single-colour.html?id=2 single-colour.html?id=3 single-colour.html?id=4 The parameter id in the URL corresponds to an entry in a table c ...

javascriptphpjquerydynamic-url

Utilizing the JSON.parse method in JavaScript in conjunction with an Ajax request while incorporating the escape character "\n" for new line functionality

https://jsbin.com/zuhatujoqo/1/edit?js,console Edit: json file has this line: {"pd":"ciao \\n ste"} I need to retrieve a valid JSON file through an ajax call. Then parse the result using JSON.parse. I'm confused about the behavior of t ...

javascriptjsonajaxescaping

Create personalized styles for each item within a stack with specific spacing using the @mui library

Is there a way to change both the background color and spacing area when hovering over each item in my list? https://i.stack.imgur.com/87TST.png <Stack spacing={4} divider={<Divider variant={`fullWidth`} orientation={`horizontal`} flexItem/>}> ...

javascripthtmlcssreactjsmaterial-ui

Extract branch, path, and URL from the .gitmodules file by utilizing JavaScript Regex

Is there a way to extract branch, path, and URL details from the .gitmodules file using JavaScript Regex? .gitmodules [submodule "PATH"] path = <PATH> url = <URL> [submodule "PATH"] path = <PATH> url = <URL> ...

javascriptregexgithub

Invoking a Node.js function using a URL reference

Is there a way to call a function located in a remote URL? I have the page URL and the function name. The server-side application is running on NodeJs Express, and the function structure is as follows: function executer(param1, param2){ //logic re ...

javascriptnode.jshttpexpress

Ways to circumvent ng switch and create a component based on type

In my current code, I have an array called resourceTypes and I am using ngSwitch to create different components/directives based on the TypeName. However, I find this approach cumbersome as I have to update the code every time I add a new resource editor. ...

javascriptangulartypescript

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

javascriptjqueryhtmlcss

Can you explain the significance of the error message stating "XMLHttpRequest.timeout cannot be set for synchronous http(s) requests made from the window context"?

I'm experiencing some timeouts with a synchronous XML HTTP request in Safari on my Mac. In an attempt to fix this issue, I added a timeout setting like this: req.open(this.method, fullURL, this.isAsync); req.setRequestHeader('Content-Typ ...

javascriptajaxsafarixmlhttprequestsafari6