Angular 背景颜色变换器未知问题

qmb5sa22 于 2021-09-29 发布在 Java

关注(0)|答案(1)|浏览(289)

我试图为我的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>

它应该允许您选择一种颜色，然后将该颜色应用为背景。现在，它看起来像这样：图片
有什么想法吗？谢谢

Html angularjs background-color

来源：https://stackoverflow.com/questions/67764692/angular-background-color-changer-unknown-problem

1条答案

按热度按时间

b4lqfgs41#

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

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>

赞(0）回复(0）举报 2021-09-29

我来回答

Angular 背景颜色变换器未知问题

1条答案

相关问题

热门标签

最新问答