在 ng-repeat 中的集合的特定元素中触发操作

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

确实和angular关系不大。只有逻辑。

您使用的是单个布尔值 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 中的集合的特定元素中触发操作

Trigger action in a particular element of a collection inside an ng-repeat

html

angularjs

angularjs-ng-repeat