Utilizing AngularJS's ng-repeat directive in conjunction with a select input allows for seamless binding of an object

Upon receiving my get request

$scope.variables = response.data;

this is my select statement:

<select name="varSelect" id="varSelect" ng-model="wid.adapter">
            <option ng-repeat="variable in variables" value="{{variable.id}}">{{variable.name}}</option>
</select>

following the select, there are two input fields

<input type="text" ng-model="wid.url" />
<input type="text" ng-model="wid.name" />

When the button is clicked, I intend to post wid object

$http.post(some_url, $scope.wid).then(function (response) {
            console.log(response);
});

The issue lies in not obtaining the variable within wid.adapter. Only the id is retrieved. How should I modify the code to retrieve the variable instead of the id?

Answer №1

employ the variable as the value rather than the id

also, make sure to utilize the ng-option attribute in the select tag for proper binding

<select name="varSelect" id="varSelect" ng-model="wid.adapter"
    ng-options="variable.name for variable in variables">
    </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

What is the correct way to apply a concatenated element id when using the .click() function in

Having an issue with assigning buttons to input boxes in a loop. When using concatenated element IDs with the .click() method, the buttons won't click for some reason. The following code works: document.getElementById("streamInput1") .addEventLi ...

Establishing a session variable using express

For my JavaScript project, I want to create a session variable that can be used across all pages. I attempted to use Express for this purpose, but I am facing an issue when trying to assign a value to the session variable. Below is the relevant code snippe ...

Mastering the art of handling errors in asynchronous Node.js code using try-catch and async

Recently, I made the switch to using async/await instead of promises. Despite this shift, I find myself unsure about the proper usage of try...catch. Consider the example below: const rp = require('request-promise'); const func2 = async () => ...

Enable lightbox functionality prior to all images being fully loaded

I have a large number of images (thumbnails) on my website and I am using the Featherlite lightbox plugin. However, when I click on one of the loaded images while they are still loading, the lightbox does not work as expected. Instead of opening in a modal ...

When a new entry is added to the database, automatically refresh a <div> section within an HTML document

I have a basic webpage that showcases various products stored in the database. My goal is to implement an updater feature where, if a user adds a new product, the page will automatically display the latest addition in a specific div. I attempted to refere ...

Storing items in localStorage in the same order they were added

I am having an issue with sorting localStorage items by the order they were added. Despite my code working to add items to the localStorage array and display them as HTML, I am encountering a problem with the order of the items. When I add a 3rd item to t ...

The onPress function seems to be malfunctioning within the menu interface specifically on iOS devices

I am experiencing an issue where a problem only occurs on iOS devices, but Android works fine. My menu has a userMenu class. import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu'; class UserMenu extends React.Component { ...

Tips for transferring an object from data attributes to methods within a VueJS component

Check out this complete example first: https://jsfiddle.net/3bzzpajh/ I'm facing a challenge where I want to pass the entire person object to the method showSelectedData. However, when I try to attach the person object to a data attribute like :data- ...

Guide on integrating a JavaScript file for user scripts into a Chrome extension

Lately, I've been working on creating user scripts for Chrome that can operate without relying on Tampermonkey. Recently, I integrated a third-party extension (a userscript js) into my Chrome extensions: // ==UserScript== // @name "job changer" ...

Ways to conceal components upon clicking a different element

Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...

Make sure two elements are siblings in JavaScript / jQuery

Looking at the HTML structure below: <div class="wrap"> <div id="a"></div> <div id="b"></div> </div> A statement is presented as false: ($('#a').parent() == $('#b').parent()); //=> false ...

Guide on How to Show Only the Initial Word of an H2 Header Using JavaScript or CSS

Is there a way to display only the first word from an h2 heading? For instance: In the website's source code, it would appear like this <h2> Stackoverflow is an Ideal Place</h2> But on the live website, it should be displayed like this ...

The Angular project failed to run properly following the ng build command

Just started working with Angularjs 2 and encountered an issue after running ng build. The compiled files were placed in the dist folder, but when I checked the index.html file within that folder, all the scripts had missing references even though they w ...

Enhancing an array item with Vuex

Is there a way to change an object within an array using Vuex? I attempted the following approach, but it was unsuccessful: const state = { categories: [] }; // mutations: [mutationType.UPDATE_CATEGORY] (state, id, category) { const record = state. ...

Retrieving External JSON Data from a Server with Firefox

I've been developing a static local HTML5 charting application that retrieves data from a remote server for output. The code works perfectly in Google Chrome, as shown below, but I'm encountering difficulties getting it to function in Firefox. & ...

Retrieve a document through Django's rest framework after verifying the user's credentials

Currently, I'm immersed in a project employing Django as the backend. My focus lies on utilizing Django Rest Framework to manage an API for downloading files. @detail_route(methods=['GET'], permission_classes=[IsAuthenticated]) def test(sel ...

Accessing a JSON value within the AngularJS controller for the purpose of making edits

Seeking assistance here, as I work with a JSON file to generate a timeline using AngularJS. While I've successfully utilized the ng-repeat loop in HTML binding to display dates, I now need to modify the date format – specifically, changing "2013-01- ...

Firestore TimeStamp.fromDate is not based on UTC timing

Does anyone have a solution for persisting UTC Timestamps in Firestore? In my Angular application, when I convert today's date to a Timestamp using the code below, it stores as UTC+2 (due to summer time in Switzerland). import {firebase} from ' ...

Creating a serial number in a Class without relying on a global variable is a useful technique that

I am looking for a way to assign a unique ID to each instance of a Class without relying on global variables. I have tried using a global variable and incrementing it, but I would prefer a more efficient approach. Is there a way to generate an ID within t ...

Challenges with handling Ajax responses in Ruby on Rails

I'm currently facing an issue with the Ajax response in my Rails application, and I'm unsure of how to troubleshoot it. Here is the code that is functioning correctly: View <div id="<%= dom_id(comment) %>_count"> <%= Like.wh ...