获取div-AngularJs的背景颜色？

Question

我想在单击该div时获得DIV元素的背景色。

HTML-

<div style="background-color:red" ng-click="getFilter($event)" class="agenda col-md-4">ABCDEGF/div>

JS控制器-

$scope.getFilter = function(event){

};

如果我们在jQuery中进行操作，则该操作可以通过-

$('div').click(function(){
   $color = $(this).css('background-color');
});

但是我想使用angularJs。 有人帮忙吗？

Answer 1

您可以使用：

$scope.getFilter = function(event) {
    $scope.color = $(event.currentTarget).css('background-color');
};

Answer 2

您可以使用ng-style动态设置颜色，我只是将其包含在每条记录的API响应中。 我假设您正在使用ng-repeat指令渲染所有元素。

标记

<div ng-repeat="item in items" 
   ng-style="{'background-color': item.color}"
   ng-click="getFilter(item);" 
   class="agenda col-md-4">
      ABCDEGF
</div>

码

$scope.getFilter = function(item){
    $color = item.color;
}

Answer 3

创建带有服务的示例示例，以动态获取和分配颜色。 JSFiddle- https: //jsfiddle.net/q16fcq99/通过所需的调用修改服务。 希望这会有所帮助。

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

获取div-AngularJs的背景颜色？

问题描述

3 个解决方案

解决方案1
3 已采纳 2016-01-29 14:45:17

解决方案2
2 2016-01-29 14:35:01

解决方案3
1 2016-01-29 15:09:08

获取div-AngularJs的背景颜色？

问题描述

3 个解决方案

解决方案1 3 已采纳 2016-01-29 14:45:17

解决方案2 2 2016-01-29 14:35:01

解决方案3 1 2016-01-29 15:09:08

解决方案1
3 已采纳 2016-01-29 14:45:17

解决方案2
2 2016-01-29 14:35:01

解决方案3
1 2016-01-29 15:09:08