所以，我刚开始接触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');
                });
        }
    };
}]);