角度背景换色器未知问题

Question

我正在尝试为我的 Angular 项目编写背景颜色转换器。这是html代码：

<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>

它应该让您选择一种颜色，然后该颜色将用作背景。 目前，它看起来像这样：picture

有什么想法吗？谢谢！

Answer 1

你很亲密。只需要使用插值从范围中检索值。

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>