更进一步

Question

所以，我刚刚开始使用angularjs，我已经感到困惑了。我想更改列表元素的颜色，该列表元素对应于数组中的十六进制代码颜色。我已经尝试了一些东西，但我无法得到它。

到目前为止，这是我的代码：
HTML

<div id="mainContentWrap" ng-app="newApp">
 <div id="personContainer" ng-controller="personController">
<ul id="personList">
    <li class="bigBox no_s" ng-style="personColour"  ng-repeat="i in persons" ng-hover="changeColor()">< href="#/{{i.person_id}}">{{i.person_name}}</a></li>
</ul>

使用Javascript：

var app=angular.module('newApp',[]);
app.controller('personController',function($scope,$rootScope){
    $rootScope.persons=[
        {person_id:'0',person_name:'Jim',colour:"cc0000"},
        {person_id:'4',person_name:'Bob',colour:"f57900"},
        {person_id:'2',person_name:'James',colour:"4e9a06"},
        {person_id:'9',person_name:'Paul',colour:"3465a4"},
        {person_id:'3',person_name:'Simon',colour:"77507b"}
    ];
    $scope.changeColor(){
        $scope.personColour=$scope.persons.color// not sure what to do here???
    }
});

Answer 1

没有ng-hover指令。您将要使用ng-mouseenter和ng-mouseleave。

另外，请记住ng-style的语法是对应CSS键值对的对象。

<li ng-repeat="i in persons" ng-style="personColour" ng-mouseenter="changeColor(i)"></li>

$scope.changeColor = function(person) {
    $scope.personColour = {color: '#'+person.colour};
};

如果您想要将颜色更改回您悬停之前的颜色，您可以创建两个函数，或将参数传递给$scope.changeColour：

<li ng-repeat="i in persons" ng-style="personColour" ng-mouseenter="changeColor(i,true)" ng-mouseleave="changeColor(i,false)"></li>

$scope.changeColor = function(person, bool) {
    if(bool === true) {
        $scope.personColour = {color: '#'+person.colour};
    } else if (bool === false) {
        $scope.personColour = {color: 'white'}; //or, whatever the original color is
    }
};

更进一步

您可以为每个人创建一个指令。

<person ng-repeat="i in persons"></person>

// your module, then...
.directive('person', [function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<li class="bigBox no_s"><a href="#/{{i.person_id}}">{{i.person_name}}</a></li>',
        link: function(scope, elm, attrs) {
            elm
                .on('mouseenter',function() {
                    elm.css('color','#'+i.colour);
                })
                .on('mouseleave',function() {
                    elm.css('color','white');
                });
        }
    };
}]);

Answer 2

在下面的代码中我添加了简单的代码，以了解如何使用条件激活样式。我希望能帮到你

private static void Swap<T>(ref T lhs, ref T rhs) 
{
    T temp; 
    temp = lhs; 
    lhs = rhs; 
    rhs = temp; 
}

public static IEnumerable<WorldTile> GetWorldTilesOnLine(int x0, int y0, int x1, int y1)
{
    bool steep = Mathf.Abs(y1 - y0) > Mathf.Abs(x1 - x0);

    if (steep)
    {
        Swap<int>(ref x0, ref y0);
        Swap<int>(ref x1, ref y1);
    }

    int dx = Mathf.Abs(x1 - x0);
    int dy = Mathf.Abs(y1 - y0);
    int error = (dx / 2);
    int ystep = (y0 < y1 ? 1 : -1);
    int xstep = (x0 < x1 ? 1 : -1);
    int y = y0;

    for (int x = x0; x != (x1 + xstep); x += xstep)
    {
        yield return worldBoard[(steep ? y : x), (steep ? x : y)];
        error = error - dy;
        if (error < 0)
        {
            y += ystep;
            error += dx;
        }
    }
    yield break;
}

Javascript代码

<li ng-style="( (isOver == 'true') && (linkToActive == 'm1')  ) ? { 'background-color': '#00bdcb' } : {'background-color': '#ededed'}"
ng-mouseenter="vm.changeColorMenu('m1','true')" ng-mouseleave="vm.changeColorMenu('m1','false')">
</li>

<li ng-style="( (isOver == 'true') && (linkToActive == 'm2')  ) ? { 'background-color': '#00bdcb' } : {'background-color': '#ededed'}"
ng-mouseenter="vm.changeColorMenu('m2','true')" ng-mouseleave="vm.changeColorMenu('m2','false')">
</li>

</ul>

Answer 3

如果你想 ~~hack~~ 留在视图中：

<div ng-repeat="n in [1, 2, 3]" ng-style="{ 'background': (isHover ? '#ccc' : 'transparent') }" ng-mouseenter="isHover = true;" ng-mouseleave="isHover = false;">
 <span>{{ n }}</span>
</div>

Answer 4

如果您查看示例here，您会看到ng-style指令等待css样式，而不仅仅是值，因此在您的情况下它将是：

$scope.person.colourStyle={'background-color':$scope.persons.color}

并在html中它将成为：

<li class="bigBox no_s" ng-style="i.colourStyle"  ng-repeat="i in persons" ng-hover="changeColor()">< href="#/{{i.person_id}}">{{i.person_name}}</a></li>

修改

您还需要将颜色值设置为完整十六进制，例如：＆＃39;＃cc0000＆＃39;。

Answer 5

在Angular中，没有ng-hover指令，因此您应该使用ng-mouseenter＆amp; ng-mouseleave来模拟它。

<ul id="personList">
    <li class="bigBox no_s" ng-style="personColour" 
        ng-repeat="i in persons" ng-mouseenter="changeColor($index)" 
        ng-mouseleave="recoverColor($index)">
            <a href="#/{{i.person_id}}">{{i.person_name}}</a>
    </li>
</ul>

你应该使用$index来获取人物数组中的元素

$scope.changeColor = function() {
    $scope.personColour = { 'color': '#' + $scope.persons[$index].color };
                           // or 'background-color' whatever you what
}

$scope.recoverColor = function() {
    $scope.personColour = {};
}

Answer 6

See Plunker Demo Here

使用ng-style有条件地应用CSS样式 - 我选择将此样式命名为'personStyle'。接下来，绑定ng-mouseover事件以将personStyle背景颜色设置为人物的颜色属性。最后，绑定ng-mouseleave事件以在鼠标离开元素时重置personStyle。此解决方案无需使用changeColor（）函数。

<div id="personContainer" ng-controller="personController">
  <ul id="personList"> 
    <li class="bigBox no_s" ng-repeat="i in persons" ng-style="personStyle">
      <a href="#/{{i.person_id}}" ng-mouseleave="personStyle={}" 
             ng-mouseover="personStyle={ 'background-color':'#' + i.colour}">
             {{i.person_name}}</a>
    </li>
   </ul>
</div>

在悬停AngularJS上更改元素颜色

6 个答案:

更进一步