Question

我是新手，如果这看起来像一个太容易的问题，那么道歉！我想更改与单选按钮颜色对应的两个div（框）的背景颜色。所以粉红色的单选按钮会使div变成粉红色，红色会使它们变成红色，依此类推。最终我还想改变身体的bg颜色和文字颜色 - 但一次只能改变一步。输入类型的ng值是否正确？我知道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;
            }

https://jsfiddle.net/sash2507/w1waetd4/3/

Answer 1

这是正确的代码

＆＃13;

Thread kill_Thread= new Thread(){
        public void run(){
            try {
                sleep(3000);
                hander.sendMessage(Message.obtain());
            } catch (InterruptedException e) {
                e.printStackTrace();
            }finally {
                finish();
            }
        }
    };
    kill_Thread.start();

＆＃13;

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"];



});

＆＃13;

.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;
}

＆＃13;

Answer 2

志良有正确的想法。另一种解决方案是使用函数调用来设置背景颜色，而不是为每个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，而不是在控制器中尝试这个。

如何在单击单选按钮时应用ng-class（css属性）？

2 个答案: