如何在點擊單選按鈕時應用ng-class（css屬性）？

我對此很新，很抱歉，如果這看起來像一個太簡單的問題！我想改變對應於單選按鈕顏色的兩個div（box）的背景顏色。所以粉紅色的單選按鈕會使div變成粉紅色，紅色會使它們變紅，等等。最終我還想要改變身體的顏色和文字顏色 - 但一次只能一步。輸入類型的ng值是否正確？我知道div上的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/

來源

2016-04-14 Saloni Sharma

下面是正確的代碼

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>

來源

2016-04-14 14:28:26

嗨，如果你覺得有幫助，請接受我的解決方案:) –

是的！超級有用。我最終使用了一個數組，因爲我必須在單擊輸入按鈕時添加多個樣式，然後在ng-class中分配相應的索引。但是你的解決方案確實讓我朝着正確的方向發展。謝謝！ –

謝謝！你可以編輯我的答案，並接受它作爲正確的答案，以便它可以幫助其他人有類似的問題 –

志良有正確的想法。如果我正確理解你的問題，另一個解決方案是使用函數調用來設置背景顏色，而不是爲每個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而不是在控制器嘗試這個。

來源

2016-04-14 14:35:41 Rob

嘿感謝這也是超級有用。我會更多地關注這個功能。非常有效。我仍然是一個初學者，所以甚至沒有功能呢！但是，感謝您的偉大解決方案。 –

如何在點擊單選按鈕時應用ng-class（css屬性）？

回答

相關問題