Angularjs Anzuwenden toggle-Funktion, um nur die angeklickte Taste innerhalb von ng-repeat

Habe ich diese fiddle ausschließlich zu Adresse mein problem. Ich bin ng-repeating bestimmten Abschnitt. Ich habe eine toggle-Funktionalität implementiert werden drin. Allerdings, wenn ich auf die Schaltfläche klicken, die Funktion wird ausgelöst, für alle die wiederholten Elemente. Dies funktioniert gut, wenn Sie nicht mit ng-repeat trotz der Verwendung der gleichen Funktion den Namen klicken. Unten ist der code. Ich denke, es ist so etwas wie der this Bediener, die ich verwenden kann hier. Mein code bisher (ich habe dies für die Geige und nicht das original),

HTML

<div ng-app="app">
    <div ng-controller="CommentController">
        <div ng-repeat="list in lists">
            <button ng-click="showDiv()" class="review">{{lists[$index]}}</button>
            <div ng-show="hiddenDiv">This is the div to be toggled on clicking any of the above button. And they do so as they make use of <i>same function on click.</i>

            </div>
        </div>
    </div>
</div>

controller

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

app.controller('CommentController', function ($scope) {
    $scope.hiddenDiv = true;
    $scope.showDiv = function () {
        $scope.hiddenDiv = !$scope.hiddenDiv;
    };
    $scope.lists = ["one", "two", "three", "four", "five"];
});

Hier ist das Umschalten, das funktioniert ohne ng-repeat jsfiddle.net/thomsebastin/jhhtkuuv/3

InformationsquelleAutor Thomas Sebastian | 2015-02-11

14

wenn Sie brauchen, um Zusammenbruch einer spezifischen wiederholen Sie nach Schaltfläche versuchen Sie folgenden,

ändern, die Taste, wie
```
<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>
```
und entfernen Sie die $scope.showDiv Funktion vom controller

DEMO-FIDDLE

BESCHREIBUNG

wenn Sie möchten,
```
 <button ng-click="showDiv()" class="review">{{lists[$index]}}</button>
```
beim klicken auf die Schaltfläche löst die $scope.showDiv Funktion vom controller, und in dieser Funktion $scope.hiddenDiv Eigenschaft Umschalten, und beachten Sie, dass $Umfang.hiddenDiv wird sichtbar ganze controller das bedeutet, dass es allgemein für alle Bereich der Steuerung, so dass, wenn Sie ändern, sobald alle anderen Dinge, die Verwendung dieser Eigenschaft geändert wird,

aber, wenn die Verwendung
```
<button ng-click="hiddenDiv = !hiddenDiv" class="review">{{lists[$index]}}</button>
```
dann wird es ein hiddenDiv Eigenschaft für jede und jeden wiederholen, da ng-repeat ist die Schaffung einer untergeordneten Bereich (DOC). so gibt es eine separate hiddenDiv Eigenschaft für eine bestimmte wiederholen, und es ist nicht für andere sichtbar sein, sichtbar nur für die relevanten wiederholen.

wenn Sie
```
<button ng-click="myData.hiddenDiv = !myData.hiddenDiv" class="review">{{lists[$index]}}</button>
```
beachten Sie, dass Ihre Verwendung myData.hiddenDiv statt hiddenDiv,
in diesem Fall eckig überprüfen hiddenDiv Eigenschaft von myData Objekt mit in ng-repeat Kind-Bereich und dann eckige erkennen, dass es keine so genannte myData im untergeordneten Bereich und dann sucht es im übergeordneten Bereich und erkannte, dass die Eigenschaft vorhanden ist, und das Grundstück ist gemeinsam für alle wiederholt wie mit der showDiv() Funktion. aber wenn u verwenden hiddenDiv ohne dann eckig wird die Suche in der ng-repeat untergeordneten Bereich und erstellen Sie einen neuen child scope-variable, die nach der Realisierung der Abwesenheit des hiddenDiv mit in untergeordneten Bereich.

finden Sie in der Prototypal Inheritance. es ist eine gute Beschreibung hier.

bitte überprüfen Sie diesem Beschreibung zu

Funktioniert wie ein Charme. Danke.
froh, Ihnen zu helfen, und ich habe einige Beschreibung und hoffe, es wird Ihnen helfen zu verstehen, das Thema besser. 🙂
Ich bin so dankbar für Ihre Hilfe. Da ich bin ein Anfänger, ich würde auch schätzen, wenn man-Adresse in Ihrer Beschreibung, was hier passiert ist, wenn ich leicht etwas geändert. jsfiddle.net/thomsebastin/pq72u7ge/1
Ich update die Antwort, überprüfen Sie bitte 🙂
Dies ist sehr hilfreich, Informationen. Vielen Dank für Ihre Zeit toress. Noch einen schönen Tag.

InformationsquelleAutor K.Toress

Können Sie auch ein array anstelle einer einfachen variable und übergeben Sie den index in der Funktion aufrufen, so dass er nicht wechseln jedes Ding in eine Aktion.

<div ng-app="app">
<div ng-controller="CommentController">
    <div ng-repeat="list in lists">
        <button ng-click="showDiv($index)" class="review">{{lists[$index]}}</button>
        <div ng-show="!hiddenDiv[$index]">This is the div to be toggled on clicking any of the above button. And they do so as they make use of <i>same function on click.</i>
        <input type="text" ng-model="textModel[$index]"/>{{textModel[$index]}}
        </div>
    </div>
</div>

Den Controller

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

app.controller('CommentController', function ($scope) {
$scope.hiddenDiv=[];
$scope.textModel=[];
$scope.showDiv = function (index) {
    $scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
    $scope.textModel[index]=null;
};
$scope.lists = ["one", "two", "three", "four", "five"];
});

http://jsfiddle.net/paje007/85vp9zme/6/

In dieser Weise, wenn Sie wollen, um irgendeine Handlung vorzunehmen, die Funktion, die Sie tun können, dass auch, wie in der Geige. Hier bin ich clearing-text-Eingabe auf ausblenden.

Sie irgendwie meine Gedanken Lesen, dass es für eine Kommentar-box 🙂 funktioniert Das auch gut. Danke.

InformationsquelleAutor paje007

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.