Replace $scope with vm in ng-options directive

Below is the code that I am currently using:

<select ng-model="setPriceClass" 
    ng-options="price as price.label for price in priceClass">
</select>

function ExampleCtrl($scope) {

    $scope.priceClass = [
      {'label': 'label1', 'value': '1'},
      {'label': 'label2', 'value': '2'},
      {'label': 'label3', 'value': '3'},
      {'label': 'label4', 'value': '4'}
    ];
    $scope.setPriceClass = $scope.priceClass[0];

}

In ng-route: ExampleCtrl as example

The select field displays my priceClass object. Now, I am attempting to use "vm." instead of "$scope.", but I am unable to make it display the priceClass in my select field.

I have tried the following:

<select ng-model="example.setPriceClass" 
    ng-options="price as example.price.label for price in example.priceClass">
</select>

function ExampleCtrl() {
    var vm = this;

    vm.priceClass = [
      {'label': 'label1', 'value': '1'},
      {'label': 'label2', 'value': '2'},
      {'label': 'label3', 'value': '3'},
      {'label': 'label4', 'value': '4'}
    ];
    vm.setPriceClass = vm.priceClass[0];

}

How can I correctly set the ng-options?

Answer №1

To make changes to the route configuration, include the controllerAs property:

.when('/prices', {
    templateUrl: 'path/example.html',
    controller: 'ExampleCtrl',
    controllerAs: 'example'
})

Next, in the template:

<select ng-model="example.setPriceClass" 
    ng-options="price as price.label for price in example.priceClass">
</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

Is it possible for an AngularJS child controller to access a parent controller's scope variable without any

Just starting out with Angularjs and here is the code I have: angular.module('remoteApp') .controller('ScreensavertabCtrl', function ($scope, $modal, $log, $state, Screensaverchpwservice, Screensaverchpwgetservice) { $sc ...

Converting a vector from global space to local space in three.js

I have an object in my scene that has been rotated. How do I go about translating a global vector into the local space of this rotated object so that they end up being rendered at the same position as the global vector? Let's say I have a cube that h ...

Leveraging IntersectionObserver to identify the video in view on the screen

Our Objective I aim to implement a swipe functionality for videos where the URL changes dynamically based on the ID of the currently displayed video. Challenges Faced Although I managed to achieve this with code, there is an issue where the screen flashe ...

Update a separate React component in response to the interaction with a different React component

Currently, I am working with a react component named Interest Category that showcases an initial set of Interest categories. Another react component called CreateInterestCategoryDialog, which functions as a modal, is responsible for creating a new entity I ...

How can I resolve the error message "No route matches [DELETE] '/'" in my web application?

I'm using Angular for the front-end of my Ruby on Rails application. angular.module('rails_api') .controller('AuthController', ['$scope', '$location', '$http', 'Auth', function($scope, $lo ...

Utilize the power of JavaScript or Lodash to substitute a string

Dealing with a scenario where a string contains multiple links that need to be replaced with actual HTML links, for example: <a href=”http://www.testing.com” target=_blank>http://www.asdfasd.com</a> Sample text: http://www.testing.com Sim ...

Issues Arising from Abstraction of Function to Service Layer in Angular Application

I have a filter function that takes in user filter selections and returns data accordingly. Currently, I am using this function in multiple components to avoid repetition (DRY). To streamline the process, I decided to refactor it into a service layer. Howe ...

attempting to sidestep the need to convert object into a string value

Let me explain the process: I am receiving various objects from an AJAX request ($scope.products - $scope.offers) and then using ng-repeat to display them, allowing the user to select multiple items (stored in $orderForm.products and $orderForm.offers). ...

Leveraging callback functions for dynamically updating a JSON structure

Recently, I've been working on a db_functions.js file that includes several functions designed to interact with a database. Here's an excerpt from the script: function getUsers(client, fn){ //var directors = {}; client.keys('*' ...

javascript execute a function when a click event occurs

I came across this code online that successfully creates a button document.write(nomedispositivo) var r=$('<input/>').attr({//beginning of button type: "button", id: "field" , value: "Turn On", However, when I add the line: on ...

Divs in jQuery smoothly slide down when a category is chosen

As I work on a large website, I have hidden div tags in my HTML that I want to be displayed when a user selects a specific category. However, due to the size of the site, there are many hidden divs that need to be revealed based on different categories sel ...

Tips for making a table have the same width as its child td elements and enabling the table to exceed the width of the viewport

I am facing a challenge with a table that has dynamically changing rows and columns. <table> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> <tr> <td> ...

I attempted to set up a Discord bot using JavaScript on Replit, but unfortunately, it seems to only respond when I mention the bot specifically, rather than to any regular

I've successfully created a python discord bot, but I'm encountering issues with the javascript one. Despite trying various solutions from StackOverflow, I'm unable to understand how to get it working. The plethora of online solutions for d ...

The conundrum with JQuery: My script refuses to run when a variable is defined

<script> $(document).foundation( let total = 1 $("button.test").click(function(){ if ($("p.change-me").text() === "OFF") { $("p.change-me").text("ON") total = total + 1 } ...

Can one utilize Javascript to write in plain text format?

Currently, using JavaScript I have a plain text containing data that is displayed within my form tags. Everything is functioning correctly, but now I need to update the values inside the code of my form tags in order for the changes to also be reflected in ...

Guide on moving elements to a different list with the help of the Angular DragDrop CDK Service

I encountered a unique situation while working on my project where I needed to implement a drag and drop feature for multiple lists using Angular CDK's DragDrop service. While I was able to successfully move items within a single list, transferring an ...

The React Component in Next.js does not come equipped with CSS Module functionality

I have been attempting to incorporate and apply CSS styles from a module to a React component, but the styles are not being applied, and the CSS is not being included at all. Here is the current code snippet: ./components/Toolbar.tsx import styles from & ...

Implementing flash messages with a delay in an express 4 application

I am currently using Passport.js with a local strategy to authenticate users on my web application. However, I have noticed a delay in setting the flash message. I have tried using the {message: ''} option in Passport and manually setting the fla ...

Embed the parent component within the child component

I have two files called Recursive.vue and Value.vue. Initially, when Recursive is the parent component, mounting Recursive within itself works perfectly. Similarly, mounting Value within Recursive and then Value within itself also works fine. However, an ...

What is the most efficient way to transfer a large search results array between NodeJS and AngularJS?

My application is built with NodeJS for the back-end and AngularJS for the front-end. I've run into an issue where sending a search query from Angular's $http to the back-end results in a bottleneck when there is a slow internet connection. Angul ...