aktiviere ng-repeat mit ng-click

Also im Grunde habe ich dieses Menü mit ng-repeat erstellt, wo es ein Feld von Objekten innerhalb eines Arrays anzeigt. Dann, wenn ich auf eines dieser angezeigten Felder klicke, möchte ich ein weiteres ng-repeat machen, das die anderen unten drücken wird. Ich möchte nur diese zweite ng-Wiederholung beim Klicken aktivieren und auch rückgängig machen, wenn der Benutzer erneut klickt. Das bedeutet, dass ng-repeat nur auftritt, nachdem der Benutzer auf eine Schaltfläche geklickt hat.aktiviere ng-repeat mit ng-click

Irgendwelche Ideen, wie ich das ausführen sollte?

<div ng-repeat="collection in library" ng-click="setCollection(collection)"> 
      <li class="list-group-item">{{collection.Collection}}</li> 
</div>

Und hier habe ich einige Code aus der JS-Datei

$scope.library = [ 
      { 
       Collection: "Harry Potter", 
       value: false, 
       books: [ 
        { 
         book: "Sorcerer Stone", 
         value: false       
        }, 
        { 
         book: "Goblet of Fire", 
         value: false, 
        } 
       ] 
      }, 
      { 
       Collection: "LOTR", 
       value: false, 
       books: [ 
        { 
         book: "Two Towers", 
         value: false       
        }, 
        { 
         book: "Return of the King", 
         value: false, 
        } 
       ] 
      } 
     ]; 

     $scope.setCollection = function(collection){ 
      collection.value = !collection.value; 
     };

Also, wenn der Benutzer auf die Sammlung klickt ng-wiederholt alle Bücher direkt unter dem Kollektionsnamen. Wenn Sie erneut auf dieselbe Sammlung klicken, werden alle wieder ausgeblendet. Wenn Sie auf ein Buch klicken, nachdem Sie auf die Sammlung geklickt haben, möchte ich, dass der Wert auf! Wenn Sie den Wert auf "True" oder "False" setzen, müssen Sammlungen und Bücher funktionieren.

Danke

Quelle

2017-08-25 N.Car

Zeigen Sie uns Ihren Code. Sie können eine Klasse anwenden, um das Objekt anzuzeigen, oder verwenden Sie ng-Show, um es nach Bedarf anzuzeigen.] – Fals

Ich habe gerade etwas Code und einige weitere Wörter hinzugefügt, um meinen Fall zu erklären. –

Überprüfen Sie meine Lösung, sehen Sie, ob es hilft @ N.Car – codeninja

Ich habe eine Demo erstellt, wie Sie wollen, Sie müssen nur ein wenig Code ändern.

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
    $scope.title = 'Welcome varun'; 
 
    $scope.mainMenu = [{ 
 
    title: 'A', 
 
    subMenu: ['A1', 'A2'], 
 
    subMenuDisplay: false 
 
    }, { 
 
    title: 'B', 
 
    subMenu: ['B1', 'B2', 'B3'], 
 
    subMenuDisplay: false 
 
    }, { 
 
    title: 'C', 
 
    subMenu: ['C1', 'C2'], 
 
    subMenuDisplay: false 
 
    }]; 
 

 
    $scope.toggle = function(menu) { 
 
    menu.subMenuDisplay = !menu.subMenuDisplay; 
 
    }; 
 
}

.menu { 
 
    min-width: 50px; 
 
    min-height: 30px; 
 
    background: grey; 
 
    border: 2px solid black; 
 
    cursor:pointer; 
 
} 
 
.subMenu { 
 
    min-width: 50px; 
 
    min-height: 30px; 
 
    background: magenta; 
 
    border: 2px solid black; 
 
    cursor:auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<body ng-app="myApp" ng-controller="MyCtrl"> 
 
    <div> 
 
    {{title}} 
 
    </div> 
 
    <div> 
 
    <div class='menu' ng-repeat='menu in mainMenu' ng-click='toggle(menu)'> 
 
     {{menu.title}} 
 
     <div class='subMenu' ng-repeat='sub in menu.subMenu' ng-show='menu.subMenuDisplay' ng-click='$event.stopPropagation()'> 
 
     {{sub}} 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body>

Quelle

2017-08-25 20:25:21

Es ist fast perfekt. Aber wie würdest du es machen, wenn du es nur umschalten willst, wenn du auf das erste Menü klickst? Ich meine, du klickst auf A und es zeigt, du klickst nochmal auf A und es sollte sich verstecken. Das Klicken auf die Untermenüpunkte sollte nur zum Öffnen von Untermenüs und nicht zum Umschalten wie jetzt funktionieren. –

Können Sie es noch einmal überprüfen, ich habe diese Demo aktualisiert und jetzt klickt auf A zeigt/verbirgt es ist Untermenü, aber klicken auf Untermenü hat keine Wirkung –

Ah ja !!! Funktioniert perfekt! Aber was macht dieser ng-click = '$ event.stopPropagation()'? Ich möchte eine andere Funktion auf diesem ng-Klick hinzufügen und ich wäre nicht in der Lage, würde ich? –

des :) Lassen Sie sagen, Sie haben:

<ul ng-hide="someVariable"> 
    <li ng-repeat="foo in bar"></li> 
</ul>

Und dann, wo immer die ng-Click dies geschieht tun:

<button ng-click="showStuff()">Show Hidden Stuff!</button>

Und in Ihrem Controller dies tun:

$scope.someVariable = true; 
$scope.showStuff = function(){ 
    If($scope.someVariable){ 
     $scope.someVariable = false; 
    } else { 
     $scope.someVariable = true; 
    } 
}

Quelle

2017-08-25 19:50:27 codeninja

Vielleicht d oing etwas wie folgt aus:

<div ng-controller="TestController as ctrl"> 
    <ul class="menu"> 

    <li ng-repeat="item in ctrl.menu.items"> 
     <a ng-click="ctrl.openSubmenu(item)">{{item.label}}</a> 

     <ul class="submenu" 
      ng-if="item.submenuIsOpen"> 

     <!-- Submenu content right here --> 

     </ul> 
    </li> 

    </ul> 
</div>

// On your controller 
var vm = this; 

// Set the menu object with items 
vm.menu = { 
    items: [ 
    { 
     label: 'Item 1', 
     submenuIsOpen: false 
    }, 
    { 
     label: 'Item 1', 
     submenuIsOpen: false 
    } 
    ] 
} 

// Then create the open submenu function 
vm.openSubmenu = function(item) { 
    item.submenuIsOpen = !item.submenuIsOpen; 
}

Sie $ Umfang als auch verwenden können, wie @codeninja hingewiesen.

Quelle

2017-08-25 20:02:16

aktiviere ng-repeat mit ng-click

Antwort

Verwandte Themen