悬停AngularJS改变元件颜色 [英] Changing Element Colour on Hover AngularJS

问题描述

所以，我刚开始接触angularjs和我已经糊涂了。我想改变对应于十六进制code颜色是一个数组列表元素的颜色。我已经尝试了一些东西，但我不能得到它。

下面是我的code到目前为止：结果
HTML

 ＆LT; D​​IV ID =mainContentWrapNG-应用=NEWAPP＆GT;
 ＆LT; D​​IV ID =personContainerNG控制器=personController＆GT;
＆所述;微升的id =personList＆GT;
    ＆LT;李班=bigBox NO_SNG式=personColourNG重复=我的人NG-悬停=changeColor（）＆GT;＆LT; HREF =＃/ {{i.person_id}}＆GT; {{i.person_name}}＆下; / A＆GT;＆下; /利＆GT;
＆LT; / UL＆GT;
 

使用Javascript：

  VAR应用= angular.module（'NEWAPP'，[]）;
app.controller（'personController'，函数（$范围，$ rootScope）{
    $ rootScope.persons = [
        {PERSON_ID：'0'，PERSON_NAME：吉姆，颜色：CC0000}，
        {PERSON_ID：'4'，PERSON_NAME：'鲍勃'，颜色：f57900}，
        {为person_id：'2'，PERSON_NAME：'詹姆斯'，颜色：4e9a06}，
        {为person_id：'9'，PERSON_NAME：'保罗'，颜色：3465a4}，
        {为person_id：'3'，PERSON_NAME：'西门'，颜色：77507b}
    ];
    $ scope.changeColor（）{
        $ scope.personColour = $ scope.persons.color //不知道这里做什么？
    }
}）;
 

解决方案

有没有 NG-悬停指令。您将要使用 NG-的mouseenter 和 NG-鼠标离开。

另外，请记住，对于吴式语法是对应的CSS键值对的对象。

 ＆LT;李NG重复=我的人NG式=personColourNG-的mouseenter =changeColor（I）＆GT;＆LT; /李＆GT;
 

  $ scope.changeColor =功能（人）{
    $ scope.personColour = {颜色：＃+ person.colour};
};
 

如果您想要的颜色改回什么是你徘徊之前，你可以创建两个函数，或参数传递给 $ scope.changeColour

 ＆LT;李NG重复=我的人NG式=personColourNG-的mouseenter =changeColor（我真）NG-鼠标离开=changeColor（我，FALSE）＆GT;＆LT; /李＆GT;
 

  $ scope.changeColor =功能（人，布尔）{
    如果（布尔===真）{
        $ scope.personColour = {颜色：＃+ person.colour};
    }否则如果（布尔=== FALSE）{
        $ scope.personColour = {颜色：'白'}; //或者，无论原来的颜色是
    }
};
 

---

要采取这一步

您可以为每个人的指令。

 ＆LT;人NG重复=我的人＆GT;＆LT; /人＆GT;
 

  //你的模块，然后... ...
.directive（'人'，[功能（）{
    返回{
        限制：'E'，
        更换：真实，
        模板：'＆LT;李班=bigBox NO_S＆GT;＆LT; A HREF =＃/ {{i.person_id}}＆GT; {{i.person_name}}＆LT; / A＆GT;＆LT; /李＆GT;' ，
        链接：功能（范围，榆树，ATTRS）{
            榆树
                。对（'的mouseenter'，函数（）{
                    elm.css（'色'，'＃'+ i.colour）;
                }）
                。对（'鼠标离开'，函数（）{
                    elm.css（'色'，'白'）;
                }）;
        }
    };
}]）;
 

So, I'm just getting started with angularjs and I'm already confused. I want to change the colour of a list element that corresponds to a hex code colour that is in an array. I've tried some stuff but I just can't get it.

Here's my code so far:
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???
    }
});

解决方案

There is no ng-hover directive. You'll want to use ng-mouseenter and ng-mouseleave.

Also, keep in mind that the syntax for ng-style is an object corresponding the CSS key-value pairs.

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

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

If you'd like for the color to change back to what it was before you hovered, you can create two functions, or pass a parameter to $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
    }
};

---

To take it a step further

You could create a directive for each person.

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

这篇关于悬停AngularJS改变元件颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！