Having trouble assigning select values from my Angular JS controller

This specific scenario

My attempt to change the selected value in the dropdown from the controller isn't working as expected, despite following guidance from various questions on this platform. The only unique aspect in my case is that I have a default value set using ng-init. How can I successfully update the value from the controller?

HTML Structure:

<select ng-model="storeorder" ng-init="storeorder = 0" ng-change="storeOrderChange(storeorder)">
    <option value="0">-- All orders --</option>
    <option ng-repeat="obj in orders" value="{{ obj.id }}">{{ obj.name }}</option>
</select>

Javascript Function Logic:

$scope.orders = data;
$scope.storeorder = parseInt($scope.order); // Attempted without parseInt as well

The console.log($scope.storeorder) displays the correct value, but it doesn't reflect the intended value in the browser.

javascriptangularjsselectangularjs-scope

Answer №1

If you prefer not to utilize ng-options(which is considered the correct approach) , an alternative method involves using 

ng-selected : Here is a Working Demo : http://jsfiddle.net/nf2m0rr1/

For example:

 <body ng-app ng-controller="OrderCtrl">
   <div>The order is: {{storeorder}}</div>
   <select ng-model="storeorder">
     <option ng-selected="{{order.value == storeorder}}" ng-repeat="order in orders" value="{{order.value}}">{{order.displayName}}</option>
   </select>
 </body>

 function OrderCtrl($scope) {
  $scope.storeorder = 2;

  $scope.orders = [{
    value: '1',
    displayName: 'Order One'
  }, {
    value: '2',
    displayName: 'Order Two'
  }]
}

Answer №2

Utilize the ng-options directive:

<select ng-model="selectedOrder" ng-init="selectedOrder= 0" ng-change="orderSelectionChange(selectedOrder)" ng-options="item.id as item.name for item in orderList">

Answer №3

After successfully implementing ng-options to tackle half of the issue, I found myself struggling with setting the default value in the DOM and adjusting the ng-init option accordingly. It was a real headache until I came up with a comprehensive solution that allowed me to eliminate any need for controller intervention:

<select ng-model="selectedOrder" ng-options="order.id as order.name for order in orders" ng-init="selectedOrder = (chosenOrder == 0 ? 0 : chosenOrder)" ng-if="orders.length > 0" ng-change="updateSelectedOrder(selectedOrder)">
    <option value="">-- All orders --</option>
</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

When the objects in the v-for loop are modified, the rerender does not occur to update the changes in

My issue involves using mounted(), along with reloadComparisons(), and this specific tag: <li v-for="comparison in comparisons">C: [[ comparison.area ]]</li> The problem arises when the rendering only occurs if comparisons is defined within d ...

javascriptvue.jsv-for

The input does not match the current value of ngModel

I'm currently working on implementing custom validation that relies on a json object provided by the user. However, I'm facing an issue where the input field does not visually display the value of the ngModel property. To better illustrate this p ...

angularjsangularjs-directiveangularjs-scope

a reliable approach to gain entry to properties that do not exist

Utilizing Google Apps Script along with JavaScript code, I am leveraging UrlFetchApp to retrieve data from the Stripe API in order to fetch an invoice. Subsequently, the Script processes the retrieved data and updates a Google Sheet template with it. An i ...

javascriptjson

What could be causing my getAsFile() method to return null?

Below is the code I have been working on: document.getElementById("Image_Panel").addEventListener('paste', (event) => { console.log("Initiating image paste - Step 1"); const clipboardData = event.clipboardData; // Checking ...

javascripthtmlcssimage

How do I establish a connection between orientDB and an AngularJS web application?

I am looking for a way to integrate orientDB with my angularJS login web application. Once the user logs in, they should be able to input data into the web application, which will then be stored in the orient DB database. I am seeking guidance on connect ...

angularjsdatabaseangularorientdbnosql

Attempting to showcase information from a JSON file using the ng-repeat directive

I am currently attempting to present data from a JSON object. <table ng-controller="statsCtrl"> <tr ng-repeat="stat in stats"> <td>{{ stat.name }}</td> <td>{{ stat.id }}</td> </tr> </tab ...

angularjs

Troubleshooting Vue.js data assignment issues

I'm attempting to implement basic form validation using Laravel 5.3 and Vue.js. Laravel controller: public function test(\Illuminate\Http\Request $request) { $this->validate($request, [ 'name' =&g ...

javascriptvue.jslaravel-5.3

Looking for assistance with navigating through this URL using Python (requests, beautifulsoup, or selenium) or Javascript (node js, puppeteer)?

While attempting to gather data, I encountered an interesting pagination challenge on the following URL: My expertise in Web Scraping was put to the test as this website implemented a unique JavaScript-driven pagination. For the initial 5 pages, it simply ...

javascriptpythonnode.jsseleniumbeautifulsoup

Tips for utilizing window.scrollTo in order to scroll inside an element:

I'm experiencing an issue where I have a vertical scrollbar for the entire page, and within that, there's an element (let's call it 'content') with a max-height and overflow-y scroll. The 'content' element contains child ...

javascripthtmlcsstypescript

Limit certain website functions exclusively for members

I am currently working on a website that offers a set of basic features for all users, along with some exclusive features reserved for members. For example, all visitors can read posts, but only members have the ability to add tags, share posts, and more. ...

javascriptphphtmlsessioncookies

Elements in Motion

Working on a parallax effect, I've managed to assign unique scroll speeds to (almost) every element. Moreover, these elements are programmed not to activate their scroll speed until they enter the viewport. Below is the JavaScript code for trigger co ...

javascriptjqueryhtmlcssparallax

Ensure the position of a DIV is synchronized with the three-dimensional world while hovering over a ThreeJS Object

Is it possible to position a DIV in 2D space on top of a 3D Object in ThreeJs in a way that it moves along with the object when the world rotates? Keep in mind that the 3D Object is loaded from a model, containing nested groups and a mesh. https://i.ssta ...

javascripthtml3dthree.js

Safari iOS 8 experiencing issues with loading WebGL image textures

The example mentioned above runs smoothly on all major browsers, including Safari on Mac OS. However, it fails to display the correct image on my iPad running the latest iOS 8. Click here for the example. Similarly, the tutorial provided in the following ...

javascriptios8three.jswebgl

Leveraging the useEffect hook to make multiple API calls in ReactJS

I have a useEffect function in my react component where I am calling the API videoGridState. The issue I am facing is that the API is being called twice; once when the page initially reloads and again when the count changes. I want it to be called only onc ...

javascriptreactjs

Prevent the href from navigating to the next page when a doubleclick event listener is triggered

In my project, I am using an anchor tag that redirects to another page. However, if the user double clicks on it, I want to prevent the default behavior and stop the redirection. <a href="{location}">My Link</a> element.addEventListen ...

javascripthtmlhrefanchorevent-listener

Using Vue Composition API to invoke a child component's method that employs a render function

While using Vue composition-api with Vue2, I encountered an issue when attempting to call a method of a component with a render function from its parent component. Everything works fine without the render function. TemplateComponent.vue <template> ...

javascriptvue.js

Implementing a login system on my website using HTML - a step-by-step guide

https://i.sstatic.net/9hOx6.png ...

javascriptphphtmlcssauthentication

Unable to resolve Uncaught TypeError: Null property reading not possible

Although I am hesitant to seek help here, solving this seemingly simple error has proved to be quite challenging. No matter what solution I attempt, the error persists. I am currently developing an application on Google Sheets that allows users to track t ...

javascripthtmlgoogle-sheetsgoogle-apps-script

Embracing right-to-left (RTL) languages

I am looking to create a website that can support both left-to-right (LTR) and right-to-left (RTL) languages seamlessly. My goal is to have the text direction switch automatically to RTL if the content is in an RTL language. Additionally, I want the input ...

javascripthtmlcssright-to-left

Default value for the href property in NextJS Link is provided

Is there a default href value for Next/Link that can be used, similar to the way it is done in plain HTML like this: <a href='#' ></a> I attempted to do this with Link, but it resulted in the page reloading. Leaving it empty caused a ...

javascriptreactjsnext.jsnext-link