AngularJS Dynamically Update ng-style - angularjs

Question

I'm trying to set an initial background color on a set of div's that are created using ng-repeat. I also want to update the background color for each div on hover.
I'm able to see the correct color on hover, but I'm not sure how I can set the initial background color for each div when I have a variable in the ng-style. I did try looping through the projects in the controller and calling the rgba function in my controller, but it just applies that last background color to all of the divs.
Here is my 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 a function called rgba that will take the hex (coming from rails api call) and turn it into 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 is the service my controller is calling:
App.factory('Projects', ['$resource', function($resource) {
return $resource('/api/projects/:id', {
id: '#id'
});
}
]);
Here is my attempt to update ng-style from the controller (but assigns all divs the last 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 to the AngularJS world, so I hope all of this makes sense. Any help is greatly appreciated. Thanks!

Answer 1

The reason why "it applies that last background color to all of the divs" is because, of the following 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 your angular.forEach runs, it is invoking $scope.rgba which is in turn updating the value of $scope.background to the latest background color. Inside your HTML markup, you have <div class="overlay" ng-style="background" ng-mouseover="rgba(project.background_color, 0.2)"></div> which looks for a variable called background in $scope.
Now the catch here is, as this markup is inside an ng-repeat every single repetition of the markup will have the same value for ng-style as everything is looking at the same object $scope.background.
Instead, what I would suggest you to do is the following.
Projects.query(function (projects) {
$scope.projects = projects; // <- $scope.projects is set when the 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 then your 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 this would solve your issue of every div having the latest background.

Answer 2

$resource.query returns a wrapper object containing a promise instead of the actual results of the query.
So with the following code:
$scope.projects = Projects.query(function(projects){
angular.forEach(projects, function(value, index) {
$scope.rgba(value.background_color, '0.8');
});
})
You are actually setting $scope.projects to the promise wrapper.
You need to change it to something like this:
Projects.query(function (projects) {
$scope.projects = projects; // <- $scope.projects is set when the query completes
angular.forEach(projects, function (value, index) {
$scope.rgba(value.background_color, '0.8');
});
});