获取div-AngularJs的背景颜色？
[英]Get the background color of div - AngularJs?
问题描述
I want to get the background color of a DIV element when I click on that div. 
我想在单击该div时获得DIV元素的背景色。
HTML - HTML-
<div style="background-color:red" ng-click="getFilter($event)" class="agenda col-md-4">ABCDEGF/div>
JS Controller - JS控制器-
$scope.getFilter = function(event){
};
If we do in in jQuery, It would have been done as - 如果我们在jQuery中进行操作，则该操作可以通过-
$('div').click(function(){
$color = $(this).css('background-color');
});
But I want to do with angularJs. 但是我想使用angularJs。 Someone help ? 有人帮忙吗？
3 个解决方案
解决方案1
3 已采纳 2016-01-29 14:45:17
you can use: 您可以使用：
$scope.getFilter = function(event) {
$scope.color = $(event.currentTarget).css('background-color');
};
解决方案2
2 2016-01-29 14:35:01
You could use ng-style for setting color dynamically, I'd just have it inside the API response for each record. 您可以使用ng-style动态设置颜色，我只是将其包含在每条记录的API响应中。 I assumed that you are rendering all the elements using ng-repeat directive. 我假设您正在使用ng-repeat指令渲染所有元素。
Markup 标记
<div ng-repeat="item in items"
ng-style="{'background-color': item.color}"
ng-click="getFilter(item);"
class="agenda col-md-4">
ABCDEGF
</div>
Code 码
$scope.getFilter = function(item){
$color = item.color;
}
解决方案3
1 2016-01-29 15:09:08
Created sample example with service to get and assign color dynamically. 创建带有服务的示例示例，以动态获取和分配颜色。 JSFiddle - https://jsfiddle.net/q16fcq99/ Modify the service with your required call. JSFiddle- https: //jsfiddle.net/q16fcq99/通过所需的调用修改服务。 Hope this will help. 希望这会有所帮助。
<body ng-app="SampleApp">
<div ng-controller="fcController">
<div ng-style="{'background-color': divColor}" ng-click="getFilter($event);" class="agenda col-md-4">
ABCDEGF
</div>
</div>
</body>
var sampleApp = angular.module("SampleApp", []);
sampleApp.controller('fcController', function($scope, colorService) {
$scope.divColor = 'red';
$scope.getFilter = function(event) {
$scope.divColor = colorService.getColor();
console.log('Event Fired');
};
});
sampleApp.service('colorService', function() {
this.getColor = function() {
return "blue"; //Call Actual Service to Get Color
};
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.