Question

我正在尝试在使用ng-repeat创建的一组div上设置初始背景颜色。我还想在悬停时更新每个div的背景颜色。

我能够在悬停时看到正确的颜色，但是当我在ng风格中有变量时，我不确定如何为每个div设置初始背景颜色。我确实尝试循环控制器中的项目并在我的控制器中调用rgba函数，但它只是将最后一种背景颜色应用于所有div。

这是我的ng-repeat块：

<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的函数，它将取十六进制（来自rails 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-style（但是为所有div指定最后的背景颜色）：

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

我对AngularJS世界很陌生，所以我希望所有这一切都有意义。任何帮助是极大的赞赏。谢谢！

Answer 1

为什么＆＃34;它将最后的背景颜色应用于所有div＆＃34;是因为，在以下代码中。

$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会将<div class="overlay" ng-style="background" ng-mouseover="rgba(project.background_color, 0.2)"></div>的值更新为最新的背景颜色。在HTML标记内，您background会在$scope中查找名为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>

然后是你的标记：

{{1}}

我相信这可以解决您拥有最新背景的每个div的问题。

Answer 2

$resource.query返回一个包含promise的包装器对象，而不是查询的实际结果。

所以使用以下代码：

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

您实际上是将$ scope.projects设置为promise包装器。

您需要将其更改为以下内容：

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

AngularJS动态更新ng-style

2 个答案: