Utilizing ng-options for dropdown selection with the "as" syntax in AngularJS

When I use ng-options to define options in a select element, everything works fine with just the controller name within the ng-controller directive. However, adding "as options" to the ng-controller causes it to stop working (no options are displayed).

Example that doesn't work:

<div ng-controller="optionsCtrl as options">
    <select ng-model="options.oxygenSource" ng-options="item.name for item in options.oxygenSources"></select><br />
</div>

Example that works:

<div ng-controller="optionsCtrl">
    <select ng-model="oxygenSource" ng-options="item.name for item in oxygenSources"></select>
</div>

If you need more context, here's my controller code:

.controller('optionsCtrl', ['$scope', 'adminServ', function ($scope, adminServ) {
    // User selections
    $scope.oxygenSource = null;

    $scope.oxygenSources = adminServ.getOxygenSources();
}])

Any ideas on why this might be happening? Thanks, Jason

Answer №1

If you are utilizing the controllerAs syntax, it is recommended to update the controller. In this case, the controller should use the this keyword instead of $scope.

Updated Controller:

.controller('optionsCtrl', ['$scope', 'adminServ', function ($scope, adminServ) {
    var options = this;
    options.oxygenSource = null;
    options.oxygenSources = adminServ.getOxygenSources();
}])

For more information on using ControllerAs, check out this article by Todd Motto: ControllerAs Syntax

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

The transformation of a class-based component into a functional one is proving to be ineffective

I am attempting to transform my class-based component into a functional one, but I am struggling with passing two parameters in one onClick function without relying on set state. Additionally, I want to avoid creating multiple extra functions as it would i ...

Retrieve the jquery.data() of an element stored in an HTML file using JavaScript or jQuery

I have a dilemma with storing HTML in a database for later retrieval. Imagine the HTML being a simple div, like this: <div id="mydiv">This is my div</div> To store related information about the div, I use jQuery.data() in this manner ...

Controller has successfully marked the checkbox as checked

Can someone assist me with my Angular controller? $scope.event = { }, type: { checked : false } }; I am using it as follows: <input id="show" name="type" type="checkbox" ng-model="event.type.checked"> After reloading the page, the check ...

The magic of Angular's data binding post-ajax retrieval

My situation is as follows: /items/item/123/edit and I have a controller that combines both the view and edit functionalities: ... if ($routeParams.id) { $scope.itemId = $routeParams.id; $scope.editMode = true; Item.getB ...

Problem encountered with the JavaScript for loop failing to execute consistently on each iteration

Currently, I am working on a JavaScript code that alerts the count in an array of pages. The variable urls represents an array of page names, while count contains the count value. My goal is to alert the count value for each page in the urls array. Howe ...

Upon initial server-side rendering load in Nuxt 3, Vercel fails to transmit the client's IP address to the Laravel backend

I'm encountering an issue with my setup where the actual client's IP address is not being forwarded correctly during the initial Server-Side Rendering (SSR) load of a page. Backend: Running Laravel on a VPS Frontend: Utilizing Nuxt 3 deployed on ...

Having trouble loading this JSON data into my table

So I have a little challenge on my hands: I've got a JSON file with information about various books, each including details like title, author, and year of publication. The goal is to select an option from the list and display the chosen property in ...

Converting UTC Date Time to Full Date Using ES6

Is there a way to transform the date 2021-01-10 12:47:29 UTC into January 10, 2021? I've been attempting to achieve this using moment.js code below, but it seems to be functioning in all browsers except Safari. {moment(video?.createdAt).format(' ...

Ways to extract particular keys from a JSON array?

I am receiving an array of JSON objects in my response. {"took":0,"timed_out":false,"_shards":{"total":1,"successful":1,"skipped":0,"failed":0},"hits":{"total":{" ...

Working with Node.js: Implementing a method callback within a loop

What is the best way to call a method with a callback in a loop? Let's say you have to make multiple calls to http.get but you want to ensure that only one request is waiting for a response at a time (to avoid overwhelming the server) http.get(url, ...

Increase the lag time for the execution of the on('data') function in Node.js

In my current function, it searches data from a database and performs an action with it. For the purpose of this demonstration, it simply increments a counter. exports.fullThreads = function(){ return new Promise((resolve, reject) => { MongoClien ...

Steps for incrementing a number in an integer field with Node.js and MongoDB

I have a dataset that looks like this: { "_id": "6137392141bbb7723", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7e7fafafef0d5f6f4f2f9f0bbf6faf8">[email protected]</a>", ...

Leveraging random attributes in Next.js without encountering the "server/client mismatch" issue

Is there a way to generate unique IDs for form inputs dynamically, in order to avoid conflicts with other elements that share the same ID? If multiple login forms are present on a single page, each with an 'email' field, setting the id property b ...

Incorrect colors are shown by Electron and Webkit browsers

As I work on developing an application using Electron, I encountered a curious color discrepancy. In Adobe XD, the color reads as rgb(0,55,200), but when I input this exact value into my app created with Electron, the displayed color shifts to rgb(4,48,193 ...

Switching an array with a single string in MongoDB

I'm facing an issue with grouping data in mongoDB and wondering if there's a way to transform an array into a string. The objects included in $lookup are currently displayed in an array format, but I need them in a single string. Here is my code ...

Proper approach for mapping JSON data to a table using the Fetch API in a React.js application

Struggling to map some elements of JSON to a Table in Customers.jsx, but can't seem to figure out the correct way. How do I properly insert my Fetch Method into Customers.jsx? Specifically managing the renderBody part and the bodyData={/The JsonData/} ...

Tips for controlling the upload of a .exe.png file or converting a .exe file to a png file for uploading in angular 8

I had originally set up restrictions to only allow image file types such as JPG, JPEG, PNG, and TIFF. However, I discovered that users were able to upload .exe files simply by renaming them. For example, changing dell.exe.png or dell.exe to dell.png allo ...

Issue: In an Angular electron app, a ReferenceError is thrown indicating that 'cv' is

I have been working on a face detection app using OpenCv.js within an Angular electron application. To implement this, I decided to utilize the ng-open-cv module from npm modules. However, when attempting to inject the NgOpenCVService into the constructor ...

Issue encountered: Unable to rename directories with contents on Windows 10 using fs.rename

I have come across several questions that relate to this issue, but none of the solutions seem to work for me. When using node.js, I am able to rename a directory only if it is empty. As soon as I add content to the directory, I receive the error message: ...

Combining all CSS into a unified file in Next.js with the help of mini-css-extract-plugin

While working with Nextjs and using Sass for styling, I noticed that in production mode, multiple CSS files are being loaded sequentially. I aim to optimize this by loading only one CSS file. After researching, I came across the MiniCssExtractPlugin which ...