AngularJS Dynamically Update ng-style -

AngularJS Dynamically Update ng-style -

i'm trying set initial background color on set of div's created using ng-repeat. want update background color each div on hover.

i'm able see right color on hover, i'm not sure how can set initial background color each div when have variable in ng-style. did seek looping through projects in controller , calling rgba function in controller, applies lastly background color of divs.

here ng-repeat block:

<section ng-controller="projectsctrl" class="work"> <div ng-repeat="project in projects" class="work-example" ng-style="{'background-color': '{{ project.background_color }}'}"> <a href="#"> <div class="inner" ng-style="{'background-image': 'url({{ project.image_url }})'}"> <div class="type">{{ project.title }}</div> <div class="client">{{ project.client }}</div> <div class="overlay" ng-style="background" ng-mouseover="rgba(project.background_color, 0.2)"></div> </div> </a> </div> </section>

my controller has function called rgba take hex (coming rails api call) , turn rgba.

app.controller('projectsctrl', ['$scope', 'projects', function($scope, projects) { $scope.rgba = function(hex, opacity) { var hex = hex.replace('#', ''), r = parseint(hex.substring(0,2), 16), g = parseint(hex.substring(2,4), 16), b = parseint(hex.substring(4,6), 16), result = 'rgba('+ r + ',' + g + ',' + b + ',' + opacity + ')'; $scope.background = { 'background-color': result } } $scope.projects = projects.query(); } ]);

here service controller calling:

app.factory('projects', ['$resource', function($resource) { homecoming $resource('/api/projects/:id', { id: '@id' }); } ]);

here effort update ng-style controller (but assigns divs lastly background color):

$scope.projects = projects.query(function(projects){ angular.foreach(projects, function(value, index) { $scope.rgba(value.background_color, '0.8'); }); });

i'm pretty new angularjs world, hope of makes sense. help appreciated. thanks!

the reason why "it applies lastly background color of divs" because, of next code.

$scope.rgba = function(hex, opacity) { var hex = hex.replace('#', ''), r = parseint(hex.substring(0,2), 16), g = parseint(hex.substring(2,4), 16), b = parseint(hex.substring(4,6), 16), result = 'rgba('+ r + ',' + g + ',' + b + ',' + opacity + ')'; $scope.background = { 'background-color': result } } $scope.projects = projects.query(function(projects){ angular.foreach(projects, function(value, index) { $scope.rgba(value.background_color, '0.8'); }); });

when angular.foreach runs, invoking $scope.rgba in turn updating value of $scope.background latest background color. within html markup, have <div class="overlay" ng-style="background" ng-mouseover="rgba(project.background_color, 0.2)"></div> looks variable called background in $scope.

now grab here is, markup within ng-repeat every single repetition of markup have same value ng-style looking @ same object $scope.background.

instead, suggest following.

projects.query(function (projects) { $scope.projects = projects; // <- $scope.projects set when query completes angular.foreach(projects, function (value, index) { $scope.rgba(project, '0.8'); }); }); $scope.rgba = function(project, opacity) { var hex = project.background_color.replace('#', ''), r = parseint(hex.substring(0,2), 16), g = parseint(hex.substring(2,4), 16), b = parseint(hex.substring(4,6), 16), result = 'rgba('+ r + ',' + g + ',' + b + ',' + opacity + ')'; project.backgroundstyle = { 'background-color': result } }

and markup:

<section ng-controller="projectsctrl" class="work"> <div ng-repeat="project in projects" class="work-example" ng-style="{'background-color': '{{ project.background_color }}'}"> <a href="#"> <div class="inner" ng-style="{'background-image': 'url({{ project.image_url }})'}"> <div class="type">{{ project.title }}</div> <div class="client">{{ project.client }}</div> <div class="overlay" ng-style="project.backgroundstyle" ng-mouseover="rgba(project.background_color, 0.2)"></div> </div> </a> </div> </section>

i believe solve issue of every div having latest background.

angularjs