Alter the selected value as the scope of the select is modified

Considering the structure of my application, I am facing an issue with updating select values in the game form when a team is deleted from the list. Here is how my application is organized:

mainApp
- storageFactory
- userController
 - userFactory
- teamController
 - teamFactory
- gameController
 - gameFactory

Team Form (within teamController)
- select name=player_1 
- select name=player_2
- input name=teamname

Game Form (within gameController)
- select name=team_1
- select name=team_2

Currently, if I create a new team, the select scopes in the game form are updated appropriately. However, when a team is deleted, only the scope in the game form selects gets updated. I have been trying to find an efficient way to update the select values in the form if an option was selected before the deletion of the team.

This is the code snippet I am using to iterate through each select value in the game form:

// Check if the first select has a value
var findTeam1 = (scopestor.gamescope.game.hasOwnProperty('team_1')) ? 1 : 0;
// Check if the second select has a value
var findTeam2 = (scopestor.gamescope.game.hasOwnProperty('team_2')) ? 1 : 0;
// Iterate through the updated scope
for(var m in scopestor.gamescope.gameTeamData) {
    // Check if the first select has a value and it is in the scope object
    if(findTeam1 === 1 && scopestor.gamescope.gameTeamData[m].teamname === scopestor.gamescope.game.team_1.teamname) {
        findTeam1 = 2;
    } 
    // Check if the second select has a value and it is in the scope object
    if(findTeam2 === 1 && scopestor.gamescope.gameTeamData[m].teamname === scopestor.gamescope.game.team_2.teamname) {
        findTeam2 = 2;
    }
}
// Check if the first select has a value and not found in the scope
if(findTeam1 === 1) {
    // Set the value empty
    scopestor.gamescope.game.team_1 = "";
}
// Check if the second select has a value and not found in the scope
if(findTeam2 === 1) {
    // Set the value empty
    scopestor.gamescope.game.team_2 = "";
}

I'm relatively new to Angular and would appreciate any suggestions or better ways of handling this update of select values in the form.

You can find this code on GitHub: kickertunier-angular for beginners

Answer №1

To access the chosen value from a select element in the DOM, simply use the ng-model directive. For more detailed information, refer to the official documentation. Remember, AngularJS facilitates two-way binding between your model and the DOM.

Here's an example:

$scope.teams = [
      {name:'player 1', team:'one'},
      {name:'player 2', team:'one'},
      {name:'player 3', team:'one'},
      {name:'player 4', team:'two'},
      {name:'player 5', team:'two'}
    ];

In your HTML, utilize a combination of ng-repeat and ng-model:

<select ng-model="selected" ng-options="member.name for member in teams">
     <option value="">-- choose name --</option>
 </select>

Display the selected name with:

<div style="border:solid 1px black; height:20px"
    ng-style="{'background-color':selected.name}">
</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

React JS - Sending props from Dev and Build to App component

Looking to include static assets and props in my App, specifically having image assets set with a base64 string in the build process. Want to ensure these assets are accessible to the App's props before development and build stages, similar to the fun ...

Is it possible to verify if each value satisfies a condition within a Javascript function?

I am currently working on a project using Vue.js and Laravel where I have a data list named "questions." My goal is to iterate through this list and check if the answer value for each question is not null. If any question has a null answer, I want to preve ...

Assign various JavaScript variables within a PHP foreach loop

I am encountering a frustrating issue where I am trying to display MySQL queries using a PHP foreach loop. However, when attempting to set a JavaScript value for each item in the loop, it only selects either the first or last value and ignores all others. ...

receiving an undefined value from a remote JSON object in Node.js

I have been struggling to extract the specific contents of a JSON api without success. Despite my best efforts, the console always returns undefined. My goal is to retrieve and display only the Question object from the JSON data. After spending several h ...

Executing window.open from Html.Actionlink in ASP.NET MVC 4

Here is the code block I am working with: @foreach (System.Data.DataRow drEquipment in Model.EquipmentList.Rows) { <tr> <td valign="top">@drEquipment["ColumnName"]<br /></td> <td valign="to ...

Is it possible to utilize Nuxt context within nuxt.config.js?

I am utilizing nuxt-i18n and @nuxtjs/auth in my project. I am looking to configure the auth.redirect option to support i18n as shown below: // nuxt.config.js export default { modules: [ '@nuxtjs/auth', 'nuxt-i18n', // .. ...

How can I make my div change color when the check-box is selected?

I have a dynamic table in my web application that is populated with data from a database. Each row in the table represents multiple time slots for a specific date. I am working on a feature where the background color of a time block can be changed if a che ...

The Javascript Date constructor struggles to interpret date strings in certain timezones that are not enclosed in brackets

Take a look at the examples below: new Date("Wed, 28 May 2014 09:50:06 EEST"); // Invalid Date new Date("Thu, 26 Jun 2014 09:09:27 EDT"); // OK, is parsed new Date("Wed, 28 May 2014 09:50:06 (EEST)"); // OK, is parsed new Date("Thu, 26 Jun 2014 09:09:27 ( ...

Convert PHP array into a 2D JavaScript array

I am currently tackling the task of passing two SQL fields through PHP to JavaScript. While I have researched extensively on creating multidimensional arrays in JavaScript, I find myself stuck when it comes to translating PHP code into JavaScript. Although ...

Implement a time interval in a recurring jQuery / Ajax operation

I'm attempting to introduce a delay into a repeating query. After some research, I've discovered that .delay isn't the right approach. Instead, it's recommended to use either setInterval or setTimeout. However, my attempts with both me ...

Leverage cookies within a custom service in AngularJS

I attempted to implement angular cookies within a custom service, only to encounter the following error: Unknown provider: ngCookiesProvider <- ngCookies <- checkLoginService My approach involves storing modules, controllers, and services in separat ...

Angular module malfunction

Striving to adhere to the best coding practices, I ventured into developing an Angular app and arrived at the following setup: The index.html file includes: <!DOCTYPE html> <html ng-app='hrsApp'> <head> <title>Hrs app& ...

Having difficulties getting basic cube rolling animations to function properly in three.js

I am a beginner in the world of THREEJS and currently working on moving a cube using arrow keys. Take a look at this fiddle: https://jsfiddle.net/mauricederegt/y6cw7foj/26/ Everything is functional, I can move the cube with arrow keys and even rotate it c ...

Code written in JavaScript inside an iframe

Is it possible to run JavaScript code inside an iframe even if the script with id "us" is loaded after creating the iframe? If so, how can this be accomplished? <iframe id="preview"> #document <html> < ...

Creating dynamic form groups that allow for the addition and removal of forms while assigning unique identifiers and names to each input field

I am currently immersed in the development of a sophisticated CMS system. My main objective is to dynamically add and remove form inputs using JavaScript upon clicking a button, with the ultimate goal of submitting the data into a database via PHP script. ...

ng-Mask: Enhancing String Operations

My goal is to only allow the input of uppercase characters as defined by the Mask. For example, using the mask code 'A' with regex [A-Z]. <input type="text" class="form-control" mask="AAAA"> I expect only uppercase characters in the range ...

What could be causing this AJAX request to malfunction on JSFiddle when it is functioning properly on my website?

I've spent more than 8 hours attempting to troubleshoot an issue, and in order to effectively showcase the problem when seeking assistance, I am currently working on replicating it using JSFiddle. However, the AJAX request does not appear to be functi ...

Error message: The eclipse platform does not recognize the (md-toolbar) tag

I have been exploring Angular Material and came across the following link: http://www.tutorialspoint.com/angular_material/angular_material_environment.htm After following CDN-based installation, I copied the code snippet below: <!DOCTYPE html> <h ...

Exploring different ways to navigate JSON data dynamically and efficiently modify it

I have a JSON data structure resembling a map. var map = { level1 : { x : {name:'level1 x' , }, y : {name:'level1 y'} }, level2 : { x : {name:'level2 x&a ...

Show only the portion of the image where the cursor is currently hovering

Information in advance: You can check out the current code or view the live demo (hover image functionality not included) at . The concept: I would like to have it so that when I hover my cursor (displayed as a black circle) over the image, only the s ...