Help me locate the error in this AngularJS mini evaluation, please

Check out the code here!

Hello, you can find the code on the provided link.

This is the HTML snippet:

  <div ng-app="testApp" ng-controller="myController">
  <select name="current" id="current" ng-model="currentliga">
      <option ng-repeat="liga in ligas">{{ liga }}</option>
  </select>

  {{ valor | currency:"R$" }}
  </div>

Here is the JS code:

  var app = angular.module('testApp', []);

  app.controller('myController', function($scope){
     $scope.ligas = ['Bronze', 'Silver', 'Gold', 'Platinum', 'Diamond'];
     var price = $scope.currentliga;
      switch(price){
        case 'Bronze':
          $scope.valor = 24;
          break;
      }
   });

My intention with this code is to retrieve the value from $scope.currentLiga based on the selected option and then assign a corresponding value to "price," which will update the "valor" accordingly. For example, if someone selects 'Bronze,' the $scope.valor should be updated to 24. If you see any errors or have suggestions, please let me know! Thank you.

Answer №1

Utilize $watch:

var app = angular.module('testApp', []);

app.controller('myController', function($scope) {
  $scope.ranks = ['Bronze', 'Silver', 'Gold', 'Platinum', 'Diamond'];

  $scope.$watch('currentRank', function(newValue, oldValue) {
    switch (newValue) {
      case 'Bronze':
        $scope.value = 24;
        break;
    }
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="testApp" ng-controller="myController">
  <select name="current" id="current" ng-model="currentRank">
    <option ng-repeat="rank in ranks">{{ rank }}</option>
  </select>

  {{ value | currency:"R$" }}
</div>

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

Embracing PWAs with subdomains – seamless installation

One of my Progressive Web Applications (PWA) called app A contains a link to another app, app B. Initially, I hosted both apps on the same subdomain (for example: ) and everything worked perfectly - installing app A also installed app B. However, when I a ...

Modifying the href attribute of links within various occurrences of an element using jQuery based on its content

Here is an illustration of a recurring element on a webpage <td class=" market all"> <a href="linktosomesite?param=123" target="_blank">123</a> </td> Similar elements change the parameter, resulting in links like: <td clas ...

In order to ensure that the multiselect bootstrap dropdown options drop outside of the div and prevent scroll bubbling, there are specific

I am trying to customize a bootstrap multiselect dropdown located within a div. You can find an example of what I'm working on at this link: http://jsfiddle.net/The_Outsider/8watL2L1/9/ In my design, I want the multiselect dropdown options to drop ou ...

I'm curious as to why my NodeJS application, once packaged with Zeit pkg, is functioning as a background process specifically in Linux Mint Cinnamon 19

Welcome! Currently using Linux Mint Cinnamon 19.1, I am working on a NodeJS project and aiming to package it into a single executable utilizing zeit pkg, targeting both Linux and Windows platforms. The packaging process is going smoothly, but... An Issue ...

Running a PHP script within an HTML file without the need to refresh the page

I need to execute a PHP File that was embedded in a div within my HTML code. The main page consists of a form and a table. The form adds rows to the MySQL table, while the table dynamically displays the content of the MySQL table. I am trying to find a way ...

Is it possible to use regex for matching both spaces and letters exclusively?

I recently created a regular expression that only allows letters. While I'm not very experienced with regex, I am struggling to figure out how to also include spaces in my expression. This is the HTML code I have: <input id="input" /> Below i ...

Utilizing multiple interactive dialog boxes with content pulled from JSON source

Welcome to the Mission Control Panel! On this interactive map, you can view mission markers and access detailed information for each mission by clicking on buttons inside the popups. Everything is dynamically generated from JSON data, so there are multiple ...

Differences in outcomes have been observed between the elementLocated and findElements functions

Currently, I am in the process of developing Webdriver automation for a specific web application. As part of this process, I have created a test that seems to be functioning well most of the time but occasionally encounters an issue. it('verifies pre ...

Excessive white space at the bottom of a floated image within a small parent element

I need help with styling a page that will only be viewed on mobile Safari. The HTML markup is as follows: <blockquote> <p><img src="..."/> A paragraph...</p> <p>...</p> ... </blockquote> Here is the CSS u ...

Tips for showing validation message just one time along with multiple error messages

Exploring ways to implement a dynamic form submit function using jQuery. $('#btnsumbit').click(function() { $('.required_field').each(function() { if ($(this).val() == "") { alert('please fill field'); ret ...

Attempting to transfer a property from one page to another using the Link component in NextJS

Currently, I have a page containing six Link elements that are meant to redirect to the same destination but with different props based on which link is clicked. To pass props, this is how I've implemented it: <Link href={{ pathname: '/pro ...

Angular Translate is unable to process multiple translation IDs simultaneously

I'm having trouble with this code as it returns a blank. $translate('INVEST_EDU', 'MOST_ULTIMATE').then(function (investEdu, mostUltimate) { After that, I attempted to use an object: $translate('INVEST_EDU', 'MO ...

Creating a dynamic routerLink value in Angular 8 for items within an ngFor loop

I am currently attempting to route a dynamic value from the NgFor using [routerLink]. <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let factors of factorsList"> <span>{{factors | ...

What is the best way to utilize Object.keys for formatting incoming data?

Here is the data I have: const langs = { en: ['One', 'description'], pl: ['Jeden', 'opis'], }; I want to convert it into this format: const formattedData = { name: { en: "One", ...

- What are the steps to integrate a different JavaScript plugin into a React project?

Lately, I've come across an issue while trying to incorporate a 3rd party plugin into my practice project in Next.js. Considering that I'm fairly new to React, understanding the 'react way' of doing things has proven to be quite challen ...

Working with NodeJS: Utilizing object casting with default values and eliminating superfluous

In the backend code of a NodeJS application, there is an object defined as follows: { name : "foo" secret : "bar" } The objective is to return this object as JSON in response to an HTTP request without including the secret key. The desired return obj ...

Implementing the DRY (Don't Repeat Yourself) principle across a group of related

I'm struggling with applying the DRY principle. Can someone assist me in creating a single function that can achieve the same results as these 4 functions? I also need guidance on how to call this function for each .symbol. function changeGradient(in ...

"Encountering an error stating 'SyntaxError: Unable to use import statement outside of a module' when attempting to import a module that itself imports another module for side

I'm currently working on writing Jest tests for my TypeScript code. To ensure compatibility with older browsers, I have included some polyfills and other necessary imports for side effects. Here is a snippet of my code (variables changed for anonymit ...

"Enhance Your Website with Drag-and-Drop Cart Functionality using HTML

Seeking assistance from anyone who has the knowledge. I've searched through similar questions on this platform but haven't been able to resolve my issue. Currently, I'm working on developing a basic shopping cart using HTML5 (Drag and Drop ...

Is there a way for me to retrieve dynamic text?

I used an "IF" statement to display dynamic text - if it's null, show something, otherwise show something else. However, I am getting a blank result. What did I do wrong? <View style={styles.rightContainer}> { () =>{ if(t ...