Einblenden / Ausblenden von Elementen mit AngularJs

Ich versuche zu zeigen, und um ein element auszublenden, Kind, so, wenn ich den Mauszeiger über einen <li> element, ich habe eine ng-show mit Wert false für alle Elemente. Wenn ich versuche, den Wert true zu zeigen, zeigt er mir alle child-Elemente. Ich möchte nur die Anzeige für jedes element schwebte Ihr Kind:

HTML-CODE:

<ul ng-init="show=false">
    <li>
        <a class="list-group-menu" href="#"><div class="icon-user"></div></a>
        <div ng-show="show"> Profile </div>
    </li>
    <li>
        <a class="list-group-menu" href="#"><div class="icon-scope"></div></a>
        <div ng-show="show"> Scope </div>
    </li>
    <li>
        <a class="list-group-menu" href="#"><div class="icon-job"></div></a>
        <div ng-show="show"> Job </div>
    </li>

    <li>
        <a class="list-group-menu" href="#"><div class="icon-login"></div>
            <div ng-show="show"> Login </div>
        </a>
    </li>
    <li>
    <a class="list-group-menu" href="#"><div class="icon-register"></div></a>
     <div ng-show="show"> Register </div>
    </li>
</ul>

JQUERY-CODE:

$('ul li').mouseenter(function() {

   $(this).children('div').show();

});

$('ul li').mouseleave(function() {

   $(this).children('div').hide();

});

InformationsquelleAutor Fabrizio Fenoglio | 2014-02-18

  1. 5

    Dies ist nicht ein Winkel-Weg. Sie sollten dies so tun.

    JS

    angular.module("firstApp").controller("myCtrl",function($scope) {
    $scope.allMenu = ["Profile","Scope","Job","Login","Register"];
});

    HTML

    <ul ng-controller="myCtrl">
    <li ng-repeat="menuName in allMenu" ng-mouseenter="show=true" ng-mouseleave="show=false">
        <a class="list-group-menu" href="#"><div class="icon-user"></div></a>
        <div ng-show="show"> {{menuName}} </div>
    </li>
</ul>
    Oh, Sorry, ich bin wirklich neu auf angularJs diese Lösung sinnvoll ist, aber wie kann tou sehen, habe ich die verschiedenen Klassen innerhalb der <div> Elemente, die habe ich einfach um ein Objekt zu erstellen, ähnlich wie so? var allMenu = { [ "name": "profile", "icon":"icon-user"] }
    Fabrizio; ja, versuchen Sie es. Obwohl eher allMenu = [{name:'test', custom_class:'specific_class'}, {..}], dann können Sie mit ng-class='{custom_class}'
    Als Erti-Chris sagte, Sie können ng-Klasse. Lesen Sie diese docs.angularjs.org/api/ng/directive/ngClass

    InformationsquelleAutor Jay Shukla

  2. 4

    Brauchen Sie nicht jedes javascript hier überhaupt. Das ist Reine CSS-Aufgabe:

    .menu .list-group-menu + div {
    display: none;
}
.menu .list-group-menu:hover + div {
    display: block;
}

    für HTML:

    <ul class="menu">
    <li>
        <a class="list-group-menu" href="#">
            <div class="icon icon-user">User</div>
        </a>
        <div>Profile</div>
    </li>
    <li>
        <a class="list-group-menu" href="#">
            <div class="icon icon-scope">Scope</div>
        </a>
        <div>Scope</div>
    </li>
    ...
    Das klingt gut, danke für diesen trick, aber das war nur eine Frage um zu verstehen, wie angularJs diesen job tun. 🙂
    Sicher. Wenn Sie nicht wollen, um eine Reihe von Elementen definiert, die im controller dann würden Sie schreiben müssen, eine Richtlinie.

    InformationsquelleAutor dfsq

  3. 1

    Bindung alle Elemente, die auf den "show" - variable, so dass, wenn Sie drehen Sie Sie auf true, werden alle Elemente zeigen.
    Wenn Sie verwenden möchten, ng-show für diesen Zweck, verwenden Sie ein array von Objekten, die alle Daten, die für die Vorlage und ein ng-repeat. Das wird nicht nur Ihr problem lösen, sondern auch TROCKNEN Sie Ihre Vorlage. Ich würde slso schlage vor, Sie schauen in $element, so dass Sie stick an die eckige Umwelt und syntax statt, der auch jquery verwenden.

    InformationsquelleAutor ruedamanuel

Schreibe einen Kommentar