0
これはあまりにも簡単な質問のように思えるかもしれません。私は、ラジオボタンの色に対応する2つのdiv（ボックス）の背景色を変更したいと思います。だから、ピンクのラジオボタンはdivをピンクにし、赤はそれを赤にします。最終的に私はボディbg-colorとテキストの色も変えたいと思っています。入力タイプのng値は正しいですか？私は部門のngクラスが間違いなくそうであることを知っています...しかし、私はそれが必要なのか分からないのですか？ラジオボタンのクリック時にng-class（cssプロパティ）を適用するにはどうすればよいですか？
事前におねがいします！ここで
<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/
こんにちは、私の解決策を受け入れるようお願いします。 –
はい！スーパーヘルプ。入力ボタンをクリックして複数のスタイルを追加してからng-classに対応するインデックスを割り当てる必要があったので、配列を使用してしまいました。しかし、あなたのソリューションは本当に正しい方向に私を入れました。ありがとう！ –
ありがとう！あなたは私の答えを編集して正しい答えとして受け入れることができるので、それは他の人が同様の問題を抱えているのに役立ちます。 –