如何動態添加類到其他元素點擊角度

我想做一個練習，其中有4個不同的顏色框和1個主框下面是空白的，當你點擊其中一個彩色框時，主箱子變成你剛纔點擊的箱子的顏色。這似乎是一塊用jQuery的蛋糕，但我不知道如何與角如何動態添加類到其他元素點擊角度

(function() { 
    'use strict'; 

function angularBoxesCtrl() { 
    var vm = this; 
    vm.mainBoxColor; 

    vm.logClass = function(e) { 
    var boxColor = e.target.classList[1]; 
    vm.mainBoxColor = boxColor; 
    console.log(vm.mainBoxColor); 
    } 

} 



angular.module('angularBoxes', []) 
    .controller('angularBoxesCtrl', [ 
    angularBoxesCtrl 
    ]); 


})();

HTML做到這一點

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Boxes</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body ng-app="angularBoxes"> 
    <div ng-controller="angularBoxesCtrl as vm" class="boxHolder"> 
    <div ng-click="vm.logClass($event)" class="box green"></div> 
    <div ng-click="vm.logClass($event)" class="box blue"></div> 
    <div ng-click="vm.logClass($event)" class="box red"></div> 
    <div ng-click="vm.logClass($event)" class="box yellow"></div> 
    </div> 
    <div class="mainBox" ng-class></div> 

    <!-- scripts --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
<script src="app.js"></script> 

</body> 
</html>

CSS

div { 
    box-sizing: border-box; 
} 
.boxHolder { 
    border: 1px solid black; 
    text-align: center; 
    font-size: 0; 
} 

.box { 
    width: 180px; 
    height: 180px; 
    display: inline-block; 
    border: 1px solid black; 
    margin: 4px; 
} 

.green { 
    background-color: green; 
} 

.blue { 
    background-color: blue; 
} 

.red { 
    background-color: red; 
} 

.yellow { 
    background-color: yellow; 
} 

.mainBox { 
    width: 400px; 
    height: 400px; 
    margin: 0 auto; 
    border: 1px solid black; 
    position: relative; 
    top: 80px; 
}

來源

2016-01-11 WinchenzoMagnifico

有一個例子，基本上在ng-class的文檔頁面上做這件事。 https://docs.angularjs.org/api/ng/directive/ng類 – Claies

我剛剛意識到我的錯誤不是ngClass，但沒有將mainBox作爲ngController * facePalm的一部分* – WinchenzoMagnifico

試試這個代碼：

<div ng-init="setFromDiv = 'green'" ng-click="setFromDiv = 'green'"class="box green"></div> 
<div ng-click="setFromDiv = 'blue'" class="box blue"></div> 
<div ng-click="setFromDiv = 'red'" class="box red"></div> 
<div ng-click="setFromDiv = 'yellow'" class="box yellow"></div> 
<div class="mainBox" ng-class="setFromDiv"></div>

來源

2016-01-11 07:20:36 amarmishra

您可以試試這段代碼。

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script> 
</head> 

<body> 
    <input type="button" value="Red" ng-click="myStyle={background:'red'}"> 
    <input type="button" value="Green" ng-click="myStyle={background:'green'}"> 
    <input type="button" value="Blue" ng-click="myStyle={background:'blue'}"> 
    <input type="button" value="Yellow" ng-click="myStyle={background:'yellow'}"> 
    <input type="button" value="Lime" ng-click="myStyle={background:'lime'}"> 
    <input type="button" value="Magenta" ng-click="myStyle={background:'magenta'}"> 
    <input type="button" value="Pink" ng-click="myStyle={background:'pink'}"> 
    <input type="button" value="White" ng-click="myStyle={background:'white'}"> 

    <div ng-style="myStyle" > 
    </BR></BR></BR></BR></BR> 
    <Center> 
    <h1>Hello</BR> 
    C-Sharp</BR> 
    Corner</BR> 
    POST BY: Punit Gajjar 
    </H1></center></BR></BR></BR></BR></BR> 
    </div> 
</body> 
</html>

來源

2016-01-11 07:27:05

你可以簡單地做這樣的

<div class="mainBox" ng-style="{'background-color': {{myColor}}}"></div>

在您的按鈕，點擊通話功能

<a ng-click="SetClass($event)" class="green">Make Green</a> 

$scope.SetClass = function(obj) {   

     //console.log(obj);    
     // Alert just the data value 
     $scope.myColor = obj.target.attributes.class.value; 

    }

，或者你可以設置其中包含CSS這樣

$scope.myStyle = { 
      "background": obj.target.attributes.class.value; 
     };

變量

然後在中使用像往常一樣。

<div ng-style="myStyle"></div>

來源

2016-01-11 07:39:22

如何動態添加類到其他元素點擊角度

回答

相關問題