Angular background color changer unknown problem

Question

I was trying to code a background color changer for my angular project. This is the html code :

<h1>Background color changer</h1>

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
        <script>
            var app=angular.module("Myapp",[])
            app.controller("Mycontroller", function($scope)
            {
                $scope.colors=[
                    {name: 'Red',color:'red'},
                    {name: 'Yellow',color:'yellow'},
                    {name: 'Pink',color:'pink'},
                    {name: 'Cyan',color:'cyan'},
                    {name: 'Orange',color:'orange'}
                ]
            });
        </script>
    </head>
    <body>
        
        <div ng-app="Myapp" ng-controller="Mycontroller">
            <select>
                <option value="" selected hidden>Select Color</option>
                <option ng-repeat="colorselect in colors" 
                style="background-color:{colorselect.color}">(colorselect.name)</option>
                    
                
            </select>
            <p>
                <a routerLink="/loggedinsettings">Go back</a>
            </p>
            
            <hr/>
            
        </div>
    </body>
</html>

It is supposed to let you choose a color and then the color will be applied as a background. For now, it looks like this: picture

Any ideas ? Thanks !

score 0 · Accepted Answer · answered May 30 '21 at 20:06

0

You were close. Just need to use interpolation for retrieving the values from scope.

var app = angular.module("Myapp", [])
app.controller("Mycontroller", function($scope) {
  $scope.colors = [{
      name: 'Red',
      color: 'red'
    },
    {
      name: 'Yellow',
      color: 'yellow'
    },
    {
      name: 'Pink',
      color: 'pink'
    },
    {
      name: 'Cyan',
      color: 'cyan'
    },
    {
      name: 'Orange',
      color: 'orange'
    }
  ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<h1>Background color changer</h1>
<div ng-app="Myapp" ng-controller="Mycontroller">
  <select>
    <option value="" selected hidden>Select Color</option>
    <option ng-repeat="colorselect in colors" style="background-color:{{colorselect.color}}">{{colorselect.name}}</option>


  </select>
  <p>
    <a routerLink="/loggedinsettings">Go back</a>
  </p>

  <hr/>

</div>

answered May 30 '21 at 20:06

derloopkat

6,232
16
38
45

Thanks for the idea. But it still quite doesn't work. I have these errors now : https://pasteboard.co/K4paRSa.png – MagentaBloabner May 31 '21 at 07:13
These are not angular errors but VS Code html syntax validation. – derloopkat May 31 '21 at 07:59
How can I fix them ? – MagentaBloabner May 31 '21 at 14:54
you could [turn off validate styles](https://stackoverflow.com/a/57495678/2516718) in vs code settings. – derloopkat May 31 '21 at 15:44
OK, thanks. But what about the web ? There are still some errors when I type ng serve, look : https://pasteboard.co/K4sHiFL.png – MagentaBloabner May 31 '21 at 16:14
I believe these issues with syntax error detection in VS Code are a different question. You could create new Stackoverflow question in case no body has asked this before. – derloopkat May 31 '21 at 16:47

Angular background color changer unknown problem

1 Answers1