Using `ng-model` to set select options in advance

Well, this one seems like it should be an easy fix, but it's proving elusive.

I have a straightforward dropdown select menu - as displayed below - with predefined options.

In my controller, I am initializing the $scope.qty, which correctly selects the appropriate <option>

However, when I try to retrieve the value of $scope.qty in a save() function, I continue to get the original value that was set initially rather than the newly selected one.

What step am I missing to properly bind the selected option to the model?

        <select ng-model="qty">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
        </select>

In my controller, I set the quantity

$scope.qty = 4;

Even after changing the selection to '2', $scope.qty still displays '4'.

Answer №1

To easily create an array, you can utilize the ng-options directive:

<select ng-options="number for number in [1, 2, 3, 4]" ng-model="quantity"></select> 

Although your method should typically work as well. The use of ng-options is not mandatory for ng-model to function. It's actually the reverse.

Answer №2

In the realm of AngularJS 1.3, only one option element is permitted to represent the null value or when nothing is selected.

To address this limitation, you must adhere to the ngOptions convention.

For further clarification on this matter, please refer to the following 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

What methods can be used to indicate the source of a GET request in a protocol?

When I request "/home" and specify that home.html should be served, I want to define the location from which all the resources included in home.html should be retrieved. For instance, if my file system looks like this: -public -home.html -home ...

Upon clicking a button, initiate an Ajax call to retrieve a value from the code behind (aspx.cs) and display it in an input field on the same page

I am a beginner in the world of AJAX and encountering a problem. I need to initiate an AJAX call when a button is clicked. The goal is to send the value of an input field to the code behind page, aspx.cs, and then display the response from that same input ...

The object does not recognize the property or method 'dataTable'; even when jQuery is included

I have been troubleshooting this issue within the realm of jQuery and data tables, but none of the recommended solutions have resolved it (in case this appears to be a duplicate right away!) Within my .Net project (C#), I have references to jQuery, Datata ...

The error message "Property 'push' of undefined in AngularJS" occurs when the push method is being called

I'm currently working on developing a basic phonebook web application to enhance my knowledge of Angular, but I've encountered an issue with this error message - "Cannot read property 'push' of undefined". Can anyone help me identify th ...

Using Three.js, I implemented a feature that allows the mousewheel to adjust the camera's position vertically rather

I am trying to achieve a specific effect in my Three.js project. I created a scene using the Three.js Editor and downloaded the project with the "Publish" option. By editing the app.js file to import OrbitControls, I have enabled zoom functionality with th ...

Activate only one option group at a time

<select name="location"> <optgroup label="West Coast"> <option value="1">Los Angeles</option> <option value="2">San Francisco</option> <option value="3">Seattle</option> &l ...

Astro Project experiencing issues with loading SRC folder and style tags

After setting up a brand new astro repository with the following commands: npm create astro@latest npm run dev I encountered an issue where the default project template failed to display correctly on my computer. Here is how the page appeared: https://i. ...

Avoiding the addition of identical objects in the array

I have expertise in JSON, and I need to be able to select multiple skills from a dropdown using model.skills. I have a function called multipleSkills() that pushes the selected values into an array called arrayvalues[], but I want to ensure that duplicate ...

Use jQuery to switch back and forth between the login and registration forms on a single

I've set up two forms, one for login and one for registration, with the default view showing the login form. There's a link that says "Don't have an account?" and when it's clicked, the registration form will display while the login for ...

What is the process for creating a JSON file that includes source and destination addresses, which can then be referenced in our grunt.js?

Currently, I am utilizing grunt as a building tool. So far, I have been directly inserting the source (src) and destination (dest) addresses into my grunt.js file. However, this approach becomes problematic when I need to modify the destination address acr ...

Retrieve the JQuery element using its ID or class identifier

I need some assistance with retrieving the innerHTML of element number 5 in a JQUERY Object. Can someone provide guidance on how to achieve this? Your help is greatly appreciated. ...

When utilizing ControllerAs, the directive parameters are replaced with new values

Trying to implement a directive with different parameter values, but the first parameter is being overridden by the second one. This is the parent HTML: <div finals-match-row team="foo"></div> <div finals-match-row team="bar"></div&g ...

What's the process for assigning a webpack ChunkName in a Vue project?

I have encountered an issue with webpack Chunk. I have already installed "@babel/plugin-syntax-dynamic-import". Below is my configuration and import() code. Despite this, only the entry index.js file is being generated in the output folder. What could I be ...

Loop through the unique `_id` values in CouchDB and use JavaScript to log them to the console

There are 3 Records Available: "_id": "20", "_id": "30", and "_id": "40". How do I display the value of _id using console.log? I am aiming for the following output: 20 30 40 ...

I must create a dropdown and lift up feature similar to the one provided in the example

I am looking to implement a drop-down navigation bar on the top right and a pop-up button/links on the top left. The drop-down menu should appear when the screen size reaches a certain pixel width. If you can't see the drop-down navigation (NAV), adju ...

Conceal a div when hovering above the navigation bar

Upon hovering over the second button in the menu, a "submenu" pops up covering part of the images within a div labeled as "container". The design of the submenu is somewhat translucent, causing the images inside the div "container" to faintly show through ...

Steps for adjusting the matMenuTriggerFor area so it only triggers when hovering over the arrow

Hello there! I'm currently working on adjusting the trigger area for opening the next menu panel. Right now, the next menu panel opens whenever I hover over either the title or the arrow. However, my goal is to have the menu open only when I hover ove ...

Utilize the Set data structure to eliminate duplicates from an array while retaining the item with

Looking for help with this array: array = [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}, {id: 3, name: 'apple'}] I want to eliminate objects with duplicated "name" property while retaining the highest id for each unique ...

Synchronize Protractor with an Angular application embedded within an iframe on a non-Angular web platform

I'm having trouble accessing elements using methods like by.binding(). The project structure looks like this: There is a non-angular website | --> Inside an iframe | --> There is an angular app Here's a part of the code I'm ...

Utilize FileHandle throughout various versions of Node.js

Is it possible to import the FileHandle module successfully across different versions of Node.js? For example, in Node.js v14 and v16, the following code functions properly: import { FileHandle } from "fs/promises"; However, in Node.js v12, thi ...