Trigger Aktion in einem bestimmten Element einer Sammlung innerhalb einer ng-Wiederholung

Question

Ich habe ein Array von Objekten, die mit ng-Wiederholung angezeigt wird. In jedem dieser Objekte befindet sich eine Schaltfläche, die eine API-Anfrage auslöst und ein Flag umschaltet, um ein verstecktes div anzuzeigen. Hier ist der HTML:

<div ng-repeat="tarjeta in tarjetas"> 
<label class="radio-inline"> 
    <input type="radio" name="card" checked> {{tarjeta.brand}} ************{{tarjeta.digits}} 
    <button class="btn btn-dropdown" ng-click="openEditCard(); getEditableInfoCard(tarjeta.id)" ng-show="!editCard"></button> 
    <button class="btn btn-up" ng-click="openEditCard()" ng-show="editCard"></button> 
</label> 
<div ng-show="editCard"> 
    <input type="text" name="nombre" placeholder="Nombre en la tarjeta:" class="form-control" ng-model="editableInfo.name" required> 
    <p ng-show="validaUpdateName">Dato incorrecto</p> 
    <div style="float: left; margin-right: 15px;"> 
     <input type="text" name="expM" placeholder="Expiración (MM):" maxlength="2" class="form-control" ng-model="editableInfo.exp_month" required> 
     <p ng-show="validaUpdateMM">Dato incorrecto</p> 
    </div> 
    <label class="dash"> 
     /
    </label> 
    <div style="float: left;"> 
     <input type="text" name="expY" placeholder="Expiración (YYYY):" maxlength="2" class="form-control" ng-model="editableInfo.exp_year" required> 
     <p ng-show="validaUpdateYY">Dato incorrecto</p> 
    </div> 
    <input type="text" name="direccion" placeholder="Dirección de la tarjeta:" class="form-control" required> 
    <br> 
    <br> 
    <br> 
    <div style="float: right;"> 
     <button class="btn btn-primary" ng-click="updateCard(tarjeta)">Guardar cambios</button> 
     <button class="btn btn-trash"></button> 
    </div> 
</div> 

Das Problem ist, dass, wenn ich auf die Schaltfläche klicken auf ein einzelnes Element, die Aktion für jedes Element des Arrays ausgelöst wird. Ich denke, das ist ziemlich einfach zu lösen, aber ich bin ein Anfänger mit Angular und kann nicht herausfinden, was das Problem ist. Ich habe das Tracking bereits mit $ index probiert. Das macht mich verrückt, jede Hilfe ist willkommen.

Answer 1

Es hat wirklich nicht viel mit eckigen zu tun. Nur mit Logik.

Sie verwenden einzigen Boolean editCard, und basierend auf diesem booleschen, sollten Sie wissen, welche Karten geöffnet werden sollten und welche nicht. Das kann unmöglich funktionieren. Ein einzelner boolescher Wert kann diese Informationsmenge nicht speichern. Nur wahr oder falsch.

Stattdessen müssen Sie für jede Karte wissen, ob es geöffnet ist oder nicht. So jede Karte sollte seine eigene boolean Flag haben:

<div ng-repeat="tarjeta in tarjetas"> 
    <button ng-click="tarjeta.edited = true" ...></button> 
    <button ng-click="tarjeta.edited = false" ...></button> 

    <div ng-if="tarjeta.edited"> 
     ... 
    </div> 
</div> 

Und wenn nur eine Karte soll zu einem Zeitpunkt geöffnet werden, thenwhat Sie wissen müssen, ist, welche der Karte geöffnet wird. Wiederum kann ein Boolean diese Information nicht speichern. So müssen Sie

<div ng-repeat="tarjeta in tarjetas"> 
    <button ng-click="edit(tarjeta)" ...></button> 
    <button ng-click="edit(null)" ...></button> 

    <div ng-if="tarjeta === editedTarjeta"> 
     ... 
    </div> 
</div> 

und in der Steuerung:

$scope.editedTarjeta = null; 
$scope.edit = function(tarjeta) { 
    $scope.editedTarjeta = tarjeta; 
};