当选择范围更改时更改选择值

Question

I want to make a update on a select value if the scope, who filled the select before, is changing. My application has this structure:

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

Team Formular (inside teamController)
- select name=player_1 
- select name=player_2
- input name=teamname

Game Formular (inside gameController)
- select name=team_1
- select name=team_2

if created a new team, the scope of the game formular selects are also updated, everything is fine. But if this team will deleted in the teamlist only the scope of the game formular selects will have an update, but i didn't found a nice way to update the select value in this formular, if there is some option was select before the team was deletet.

now i run with following code thru each select value in the game formular:

// 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;
// run thru the updatet scope
for( var m in scopestor.gamescope.gameTeamData ){
    // check if the first select has a value
    // and it is also 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 also 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 am a beginer with angular and searching for a better way to handle this update of th select values, any answer will be grateful.

this code on github: kickertunier-angular for beginers

Answer 1

you can have access to the selected value using the ng-model over a select element in the dom for more information look at the documentation , an remember that angularjs uses double binding between the DOM and your model.

It could be something like

$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 markup use a ng-repeat / ng-model combination

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

selected

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