AngularJS動態更新ng樣式

Question

我試圖在使用ng-repeat創建的一組div上設置初始背景色。我也想更新懸停時每個div的背景顏色。

我能夠在懸停上看到正確的顏色，但我不知道如何爲每個div設置初始背景顏色，當我有一個ng樣式的變量時。我曾嘗試循環控制器中的項目，並在我的控制器中調用rgba函數，但它只是將最後一個背景顏色應用於所有div。

這裏是我的NG-重複塊：

<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> 

我的控制器有一個函數調用RGBA，將採取十六進制（從軌API調用來），並把它變成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(); 
    } 
]); 

這裏是我的控制器調用服務：

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

這是我試圖從控制器更新NG-風格（類型，而是將所有div的最後一個背景色）：

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

我對AngularJS世界很新，所以我希望所有這些都有道理。任何幫助是極大的讚賞。謝謝！

Answer 1

爲什麼「它適用於去年的背景顏色爲所有的div」是的，因爲下面的代碼的原因。

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

當你的angular.forEach運行時，它被調用$scope.rgba這是在轉彎$scope.background值更新到最新的背景色。在您的HTML標記中，您有<div class="overlay" ng-style="background" ng-mouseover="rgba(project.background_color, 0.2)"></div>，它在$scope中查找名爲background的變量。

現在趕上這裏，因爲這個標記是在一個ng-repeat每一次重複的標記將具有相同的值爲ng-style因爲一切都在看同一個對象$scope.background。

相反，我建議你做的是以下幾點。

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

然後你的標記：

<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> 

我相信這會幫助您解決問題的每一個div的具有最新的背景。

Answer 2

$resource.query返回包含承諾的包裝器對象，而不是查詢的實際結果。

用下面的代碼

所以：

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

你實際上是設置$ scope.projects的諾言包裝。

你需要改變它的東西是這樣的：

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