如何在单选按钮单击时应用ng-class (css属性)？
如何在单选按钮单击时应用ng-class (css属性)？
提问于 2016-04-14 22:08:03
输入类型上的ng-value是否正确？我知道div上的ng-class绝对不是...但我不确定它需要是什么？
提前感谢你！
<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;
}回答 2
Stack Overflow用户
发布于 2016-04-14 22:28:27
下面是正确的代码
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>
Stack Overflow用户
发布于 2016-04-14 22:35:41
智良的想法是正确的。另一种解决方案是使用函数调用来设置背景颜色，而不是将内联条件放到每个div中，如果我没有理解您的问题的话。
此外，通过使用颜色数组，您只需在数组中添加新颜色，添加您的颜色类，视图就会自动反映这一点。您可以前进一步，将颜色存储在JSON文件中，以便控制器在添加新颜色时获取和更新JSON文件。
小提琴：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，而不是在控制器中尝试这样做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36625659
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号