gpt4 book ai didi

html - 动态更改主体颜色,这应该反射(reflect)在 Angular js 的每个页面中

转载 作者:太空宇宙 更新时间:2023-11-04 01:47:22 25 4
gpt4 key购买 nike

我需要更改主页(即登录后的登陆页面)的颜色,它应该反射(reflect)所有页面。在主页中会有颜色列表,以便用户可以选择任何颜色,并且应该反射(reflect)所有页面。

我在主页中创建了下拉颜色,并且该页面中的颜色正在更改,只是现在我需要以相同的颜色反射(reflect)所有页面。在下面的代码中,用户可以选择一种颜色,它反射(reflect)了同一个页面,但是当我使用超链接移动到 home1.html 页面时,我在这个页面中也需要 sae 颜色我怎么才能得到这个......

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<h4>
<small>color box</small>
</h4>
<select ng-model="color">
<option value="">--- Select a color ---</option>
<option value="{{c}}" style="background-color:{{c}}"
ng-repeat="c in colors">
{{c}}
</option>
</select>
<p>Selected color: <b style="color:{{color}}">{{color}}</b></p>
<div style="background-color:{{color}}">

<div class="square" style="background-color:{{color}}">

<a href="home1.html">Visit our page </a>
</div>

</div>

</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.colors = ['Blue', 'Cyan', 'Green', 'Orange', 'Pink', 'Purple', 'Red'];
$scope.objects = [
{id: 1, color: 'Blue'},
{id: 2, color: 'Cyan'},
{id: 3, color: 'Green'},
{id: 4, color: 'Orange'},
{id: 5, color: 'Pink'},
{id: 6, color: 'Purple'},
{id: 7, color: 'Red'}
];

});



</script>
<style>
p { background-color: LightGray; }

.blue { background-color: Blue; }
.cyan { background-color: Cyan; }
.green { background-color: Green; }
.orange { background-color: Orange; }
.pink { background-color: Pink; }
.purple { background-color: Purple; }
.red { background-color: Red; }


.square {
background: #000;
width: 20vw;
height: 10vw;
}
.square h1 {
color: #fff;
}
</style>

最佳答案

$rootscope.color 中设置颜色变量,用作下拉列表的 ng-model。然后它将对您可以使用它的所有状态或页面可用。

关于html - 动态更改主体颜色,这应该反射(reflect)在 Angular js 的每个页面中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44212524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com