webentwicklung-frage-antwort-db.com.de

Ändern der Elementfarbe im Hover AngularJS

Also, ich fange gerade erst mit Anglejs an und bin schon verwirrt. Ich möchte die Farbe eines Listenelements ändern, das einer Hex-Code-Farbe in einem Array entspricht. Ich habe ein paar Sachen ausprobiert, aber ich kann es einfach nicht verstehen.

Hier ist mein Code bisher:
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???
    }
});
javascriptangularjs
13
Joe Thomas

Es gibt keine ng-hover-Direktive. Sie möchten ng-mouseenter und ng-mouseleave verwenden.

Denken Sie auch daran, dass die Syntax für ng-style ein Objekt ist, das den CSS-Schlüssel-Wert-Paaren entspricht.

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


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

Wenn Sie möchten, dass die Farbe wieder in den Zustand zurückversetzt wird, der vor dem Schwebeflug war, können Sie zwei Funktionen erstellen oder einen Parameter an $scope.changeColour übergeben:

<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
    }
};

Um noch einen Schritt weiter zu gehen

Sie können für jede Person eine Direktive erstellen.

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

Wenn du möchtest hacken in der Aussicht bleiben:

<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>
4
James Salamon

Im folgenden Code füge ich einfachen Code hinzu, um zu verstehen, wie man mit Bedingung aktiv ist. Ich hoffe das hilft dir  

<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

function changeColorMenu(indexMenu,bool)
    {
        $scope.isOver = bool;
        $scope.linkToActive = indexMenu;
    }
4
BERGUIGA Mohamed Amine

Wenn Sie ein Beispiel hier prüfen, werden Sie feststellen, dass die ng-style-Direktive auf den CSS-Stil und nicht nur auf den Wert wartet. 

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

und in HTML wird es sein:

<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:

Außerdem müssen Sie den Farbwert auf Vollhex setzen, beispielsweise '# cc0000'.

1
Sergey Moiseev

Siehe Plunker Demo hier

Verwenden Sie ng-style, um CSS-Stile bedingt anzuwenden. Ich habe diesen Stil 'personStyle' genannt. Binden Sie anschließend das Ereignis ng-mouseover, um die Hintergrundfarbe personStyle auf das Farbattribut der Person festzulegen. Binden Sie schließlich das ng-mouseleave -Ereignis, um die personStyle zurückzusetzen, wenn die Maus das Element verlässt. Die changeColor () - Funktion wird nicht benötigt, damit diese Lösung funktioniert.

<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>
0
pixelbits

In Angular gibt es keine ng-hover-Direktive, daher sollten Sie ng-mouseenter & ng-mouseleave verwenden, um sie zu simulieren.

<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>

Und Sie sollten $index verwenden, um Ihr Element in Persons Array abzurufen

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

$scope.recoverColor = function() {
    $scope.personColour = {};
}
0
Chen-Tsu Lin