我对此很陌生，如果这个问题看起来太容易了，我很抱歉！我想更改与单选按钮的颜色相对应的两个div（框）的背景颜色。因此，粉红色的单选按钮会使div变成粉红色，红色会使它们变成红色，等等。最终，我也希望主体bg颜色和文本颜色改变——但一步一步。输入类型上的ng值正确吗？我知道潜水艇上的ng级绝对不是。。。但我不确定它需要什么？
提前感谢！
<body ng-app="MyModule">
<div ng-controller="MyController as ctrl">
<!-- Create input radio button -->
<input type="radio"
name="color"
ng-model="ctrl.colorSelected"
ng-value="ctrl.bgColorRed">Red
<input type="radio"
name="color"
ng-model="ctrl.colorSelected"
ng-value="ctrl.bgColorPink">Pink
<input type="radio"
name="color"
ng-model="ctrl.colorSelected"
ng-value="ctrl.bgColorOrange">Orange
<input type="radio"
name="color"
ng-model="ctrl.colorSelected"
ng-value="ctrl.bgColorYellow">Yellow
<div class="box" ng-class="ctrl.bgColorRed">
Letterpress craft beer typewriter, bitters butcher ennui heirloom celiac. Four dollar toast pork belly 8-bit trust fund, raw denim letterpress shoreditch stumptown food truck locavore venmo typewriter blog. Post-ironic chambray lumbersexual, fashion axe hoodie kitsch swag yuccie organic. DIY hoodie lomo, austin post-ironic literally portland shoreditch pour-over neutra sriracha YOLO selvage thundercats messenger bag.
</div>
<div class="box" ng-class="">
Tumblr hammock authentic, humblebrag pitchfork ramps listicle cliche distillery ethical 8-bit vice. 3 wolf moon whatever direct trade fanny pack franzen, swag polaroid austin letterpress. Street art health goth everyday carry heirloom hoodie echo park gluten-free irony, viral venmo brunch vegan pop-up. Man braid listicle food truck, fashion axe austin polaroid pop-up shoreditch post-ironic scenester jean shorts synth.
</div>
//////// JS /////////
var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function() {
var self = this;
self.colorSelected = " ";
self.bgColorRed=["red"];
self.bgColorPink=["pink"];
self.bgColorOrange=["orange"];
self.bgColorYellow=["yellow"];
self.textColor=["white", "strong"];
});
///// CSS ///////////
.box {
width: 350px;
height: 350px;
background-color: grey;
margin-top: 50px;
margin-left: 100px;
padding: 20px;
float: left;
text-align: justify;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.white {
color: white;
}
.strong {
font-weight: bold;
}
https://jsfiddle.net/sash2507/w1waetd4/3/
这是正确的代码
var myMod = angular.module("MyModule", []);
myMod.controller("MyController", function() {
var vm = this;
vm.colorSelected = "";
// Class change assignment
vm.bgColorRed = "red";
vm.bgColorPink = "pink";
vm.bgColorOrange = "orange";
vm.bgColorYellow = "yellow";
vm.textColor = ["white", "strong"];
});.box {
width: 300px;
height: 300px;
background-color: grey;
margin-top: 50px;
margin-left: 100px;
padding: 25px;
float: left;
text-align: justify;
font-size: 1.15em;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.white {
color: white;
}
.strong {
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyModule">
<div ng-controller="MyController as ctrl">
<!-- Create input radio button -->
<input type="radio" name="color" ng-model="ctrl.colorSelected" ng-value="ctrl.bgColorRed">Red
<input type="radio" name="color" ng-model="ctrl.colorSelected" ng-value="ctrl.bgColorPink">Pink
<input type="radio" name="color" ng-model="ctrl.colorSelected" ng-value="ctrl.bgColorOrange">Orange
<input type="radio" name="color" ng-model="ctrl.colorSelected" ng-value="ctrl.bgColorYellow">Yellow
<div class="box" ng-class="{red: ctrl.colorSelected == ctrl.bgColorRed, pink: ctrl.colorSelected == ctrl.bgColorPink, orange: ctrl.colorSelected == ctrl.bgColorOrange, yellow: ctrl.colorSelected == ctrl.bgColorYellow}">
{{ctrl.colorSelected}} Letterpress craft beer typewriter, bitters butcher ennui heirloom celiac. Four dollar toast pork belly 8-bit trust fund, raw denim letterpress shoreditch stumptown food truck locavore venmo typewriter blog. Post-ironic chambray
lumbersexual, fashion axe hoodie kitsch swag yuccie organic. DIY hoodie lomo, austin post-ironic literally portland shoreditch pour-over neutra sriracha YOLO selvage thundercats messenger bag.
</div>
<div class="box" ng-class="{red: ctrl.colorSelected == ctrl.bgColorRed, pink: ctrl.colorSelected == ctrl.bgColorPink, orange: ctrl.colorSelected == ctrl.bgColorOrange, yellow: ctrl.colorSelected == ctrl.bgColorYellow}">
Tumblr hammock authentic, humblebrag pitchfork ramps listicle cliche distillery ethical 8-bit vice. 3 wolf moon whatever direct trade fanny pack franzen, swag polaroid austin letterpress. Street art health goth everyday carry heirloom hoodie echo park
gluten-free irony, viral venmo brunch vegan pop-up. Man braid listicle food truck, fashion axe austin polaroid pop-up shoreditch post-ironic scenester jean shorts synth.
</div>
</div>
</body>志亮的想法是正确的。另一个解决方案是使用函数调用来设置背景颜色，而不是为每个div设置一个内联条件，如果我正确理解您的问题的话。
此外，通过使用颜色数组，您只需在数组中添加一种新颜色，添加您的颜色类，视图就会自动反映这一点。您可以更进一步，将颜色存储在JSON文件中，以便控制器获取，并在您想要添加新颜色时更新JSON文件。
Fiddle：https://jsfiddle.net/oyt1jzjw/
function ColorsCtrl() {
var self = this;
self.colors = ['Red', 'Green', 'Pink'];
self.changeColor = changeColor;
function changeColor(color) {
self.colorSelected = color;
}
}
<div ng-repeat="color in ctrl.colors">
<input type="radio" name="color" ng-click="ctrl.changeColor(color)">{{color}}
</div>
<hr>
<div ng-class="ctrl.colorSelected">
Stuff Here
</div>
<div ng-class="ctrl.colorSelected">
Stuff Here
</div>
如果你想开始更改页面的背景色，我建议你使用一个指令来操作dom，而不是在控制器中尝试。