Question

我有一个使用ng-repeat显示的对象数组。在每个对象中都有一个触发API请求并切换标志以显示隐藏div的按钮。这是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>

问题是，当我单击单个元素上的按钮时，将触发该数组的每个元素的操作。我认为这很容易解决，但我是一个使用Angular的初学者，无法弄清问题是什么。我已经尝试过按$ index跟踪。这让我感到疯狂，欢迎任何帮助。

Answer 1

它与角度无关。只有逻辑。

您正在使用单个布尔值editCard，并且基于该布尔值，您应该知道应该打开哪些卡，以及哪些卡不应该打开。那可能无法奏效。单个布尔值不能存储该数量的信息。只有真或假。

相反，您需要每张卡才能知道它是否已打开。所以每张卡应该有自己的布尔标志：

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

如果一次只能打开一张卡，那么您需要知道的是哪张卡是打开的。同样，布尔值不能存储该信息。所以你需要

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

并在控制器中：

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

在ng-repeat

1 个答案: