[英]Changing Element Colour on Hover AngularJS
So, I'm just getting started with angularjs and I'm already confused. 所以,我刚刚开始使用angularjs,我已经很困惑了。 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 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: 使用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. 没有
ng-hover
指令。 You'll want to use ng-mouseenter
and ng-mouseleave
. 你会想要使用
ng-mouseenter
和ng-mouseleave
。
Also, keep in mind that the syntax for ng-style
is an object corresponding the CSS key-value pairs. 另外,请记住
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};
};
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
: 如果您希望颜色变回原来的状态,可以创建两个函数,或者将参数传递给
$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
}
};
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');
});
}
};
}]);
in the code bellow i add easy code to understand how to active style with condition. 在下面的代码中,我添加了简单的代码,以了解如何使用条件激活样式。 I hope that help you
我希望能帮助你
<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>
Javascript Code Javascript代码
function changeColorMenu(indexMenu,bool)
{
$scope.isOver = bool;
$scope.linkToActive = indexMenu;
}
If you want to
hack
stay in the view: 如果你想
破解
留在视图中:
<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>
If you check an example here you will see that ng-style directive waits for css style, not just value, so in your case it'll be: 如果你在这里查看一个例子,你会看到ng-style指令等待css样式,而不仅仅是值,所以在你的情况下它将是:
$scope.person.colourStyle={'background-color':$scope.persons.color}
and in html it'll be: 并在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>
edit: 编辑:
And You also need to set colour value to full hex for example: '#cc0000'. 您还需要将颜色值设置为完整十六进制,例如:'#cc0000'。
In Angular, there is not ng-hover
directive, so you should use ng-mouseenter
& ng-mouseleave
to simulate it. 在Angular中,没有
ng-hover
指令,因此您应该使用ng-mouseenter
& 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>
And you should use $index
to get your element in persons Array 你应该使用
$index
来获取人物数组中的元素
$scope.changeColor = function() {
$scope.personColour = { 'color': '#' + $scope.persons[$index].color };
// or 'background-color' whatever you what
}
$scope.recoverColor = function() {
$scope.personColour = {};
}
See Plunker Demo Here 请参阅此处的Plunker演示
Use ng-style to conditionally apply CSS styles - I've chosen to name this style 'personStyle'
. 使用ng-style有条件地应用CSS样式 - 我选择将此样式命名为
'personStyle'
。 Next, bind the ng-mouseover event to set the personStyle
background-color to the person's colour attribute. 接下来,绑定ng-mouseover事件以将
personStyle
background-color设置为person的color属性。 Finally, bind the ng-mouseleave event to reset the personStyle
when the mouse leaves the element. 最后,绑定ng-mouseleave事件以在鼠标离开元素时重置
personStyle
。 The changeColor() function is not needed for this solution to work. 此解决方案不需要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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.