所以,我刚刚开始使用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???
}
});
答案 0 :(得分:22)
没有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');
});
}
};
}]);
答案 1 :(得分:4)
在下面的代码中我添加了简单的代码,以了解如何使用条件激活样式。我希望能帮到你
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>
答案 2 :(得分:4)
如果你想 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>
答案 3 :(得分:1)
如果您查看示例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;。
答案 4 :(得分:0)
在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 = {};
}
答案 5 :(得分:0)
使用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>