Retrieving data from the chosen selection in AngularJS

My current task involves extracting the URL from the selected option and assigning it to the ng-model of the select element.

Here is the HTML code snippet:

<select ng-model="ddValue1.value">
    <option ng-repeat="d in ddOptions1" value="{{d.value}}">{{d.text}}</option>
</select>

And here is some JS code:

$scope.ddOptions2 = [
  {value: 'value1', text: 'Text1', url: 'google.com'},
  {value: 'value2', text: 'Text2', url: 'yahoo.com'}
];
$scope.ddValue2 = {};
$scope.ddValue2.value = $scope.ddOptions2[0].value;

I attempted to assign the URL by using the following syntax: ng-model="ddValue1.url=d.url"

Answer №1

To implement dropdown options in AngularJS, utilize the ng-options directive accordingly:

<select ng-model="selectedOption"
    ng-options="option.text for option in dropdownOptions track by option.value">
</select>

You can then easily access the selected option's URL using selectedOption.url

Answer №2

There appears to be a typo in the ng-repeat directive where ddOptions2 is being called incorrectly.

<option ng-repeat="d in ddOptions2" value="{{d.value}}">{{d.text}}</option>

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

Error: Child component received an undefined prop

Within my parent component, I have three child components. The first child component is a form that, upon submission, passes data to the second and third child components through props via the parent component. However, in one of the child components, the ...

JavaScript Regular Expression Assistance Domain Snatcher

I am in the process of developing a JavaScript Regex and I am struggling to find the right pattern to match a specific domain. Let me provide an example for better understanding. I need a regex that can identify any domain that exclusively contains (text. ...

The function req.isAuthenticated() always returns false and never evaluates to true

My goal is to create user authentication using the following code: userRouter.post("/login", passport.authenticate("local", { session: false }), (req, res) => { if (req.isAuthenticated()) { const { _id, username } = req.user; const t ...

Tips on activating the capabilities of component controllers externally

One of my components contains a function inside: app.component("myComponent", { templateUrl: "myComponent.html", controller: function() { this.addApp = function (arg) { console.log(arg); }; } }) I am interested in ...

displaying a PDF file in Safari

Is there a way to display a PDF document within an HTML page without encountering a missing plugin error? I attempted to use the following code, but the error persists. Interestingly, if I drag the same PDF file directly into my browser, it displays perfe ...

the frequency at which a filter is activated

Imagine using a filter like this: app.filter('unread', function () { return function (note) { console.log(note); return (note.status == 'unread'); }; }); I have applied this filter on an array in $rootScope <span ng-cl ...

An Illustration of Basic Nested Controller within Directive Parameters

Check out this code snippet app.directive('hello', function() { return { restrict: "E", templateUrl: "/Angular/Modules/Selector.html", controller: function () { this.message = [enter the attribute message he ...

Childnode value getting replaced in firebase

Every time I attempt to push values to the child node, they keep getting overridden. How can I solve this issue and successfully add a new value to the child node without being overwritten? ...

Looking to display a JSON-based menu using AngularJS?

Having trouble displaying a dropdown menu when trying to print a menu from a JSON file. https://i.sstatic.net/fNLxw.png JSON Data [{ "Option": "Request", "Name": "<a href=\"#/request\"><i class=\"material-icons left\ ...

The function req.send('null') does not exist in the Node.js MySQL library

I am struggling with inserting a form into a MySql database. The values are stored in the database from the form, but the table displayed on the page does not refresh. I can only see the entries when I restart the server and revisit the page. Furthermore, ...

Every time I try to create a new React app, I consistently run into the same error

I keep encountering this error every time I try to create a React app using create-react-app. ...

Navigating File Paths in Node.js

My directory structure is as follows: Main > models > file1.ejs | |> routes > file2.ejs In my code, I'm trying to require file1 from file2 like this: const variable = require("../models/file1.ejs). But what if I don't want to ...

Vue Array Proxy Class Fails to Trigger Reactivity

My custom Array extension has a feature where it intercepts changes made to its properties using Proxy, which is returned from the constructor. However, when used in a Vue component, it encounters issues. For example, when a filter is added, the display do ...

Storing references to the DOM elements external to the rendering component

Just diving into the world of Electron + Typescript, so please bear with me. Currently, I'm experimenting with what can be achieved within Electron. Issue: My goal is to manipulate DOM elements outside of the renderer. I pass a button as a parameter ...

The formValidation, previously known as BootstrapValidator, is causing issues with my form submission via Ajax, despite my efforts to update the code to work with

I recently upgraded the old BootstrapValidator to the new 0.6.0 release known as formValidation. Despite reading the documentation multiple times, I have been unsuccessful in finding the issue and need some assistance. Below are the CSS styles and scripts ...

Is it possible to modify the labels on CKEditor's toolbar elements?

Initializing CKEditor in the following manner: function init() { $( ".ckeditor" ).ckeditor( { format_tags: 'h3;p', toolbar: [ [ "Source", "-", "Bold", "Italic" ], [ "Link", "Unlink" ], [ "Blockquote", "F ...

What is the reason behind combining all states into a single location in Redux, even if they are not globally accessible?

As a newcomer to React and Redux, I have found them to be quite enjoyable when used together in a small sandbox application. However, as I consider larger applications, I can't help but question why Redux stores the entire application state in a singl ...

What is the best way to organize two separate arrays based on a single shared variable?

I have two separate arrays containing information. One array includes the title of each national park and other related data, while the second array consists of alerts from the entire NPS system. The common factor between these arrays is the parkCode. How ...

Ways to show a div element within an input field?

I want to incorporate tags similar to stackoverflow on my website. Users will be able to create tags for filtering results, searching, showcasing expertise, and more. I have managed to create tags, but I am struggling to display them inside an input box l ...

combining multiple arrays at once in angularjs

When utilizing ng-repeat with values group1 and group2, I encountered the following output: grp1 grp2 abc def value1 value2 However, I am aiming for the following structure: grp1 abc value1 grp2 def value1 HTML: <ul ...