Question

所以我是AngularJs的新手。目前我正在尝试实现表过滤，然后当我点击删除按钮时，它应该删除正确的对象。

这是我在过滤前的方式：

$scope.rowIndex = -1;
$scope.selectRow = function(index) {
if (index == $scope.rowIndex)
  $scope.rowIndex = -1;
else
  $scope.rowIndex = index;
}
});

在我的HTML中：

ng-repeat="session in sessons " ng-class="{'bg-primary':rowIndex == $index }" ng-click="selectRow($index)"

现在实现过滤后，我发现$ index是错误的...所以我必须找到另一种方式..我读了一些文章，并且都说了同样的......我只是将整个对象传递给函数。 ..但每个例子都在ng-repeat内完成。不幸的是......我不能这样做，因为我有一个外部div为Modal。

那么如何将当前所选的会话/行传递给模态中的函数？ {{deleteSession（session）}}

<div id="deleteSessionModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <h4 class="modal-title">Delete Session</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to delete these Records?</p>
          <p class="text-warning">
            <small>This action cannot be undone.</small>
          </p>
        </div>
        <div class="modal-footer">
          <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
          <input type="submit" class="btn btn-danger" value="Delete" ng-click="deleteSession(session)">
        </div>
      </form>
    </div>
  </div>
</div>

this is how my html / table looks like

Answer 1

你可以传递会话作为选择行函数的值：

ng-repeat="session in sessons " ng-class="{'bg-primary':rowIndex == $index }" ng-click="selectRow(session)"

在函数selectRow中，您可以从会话中获取Id并将其从会话列表中删除。

Answer 2

不是将$index传递给selectRow函数，而是发送session.speakerId或其他特定的会话唯一键：

ng-click="selectRow(session.speakerId)"

在您的控制器中设置/取消设置所选会话：

$scope.selectedSessionSpeakerId = null;

$scope.selectRow = function(sess) {
  if (sess == $scope.selectedSessionSpeakerId)
    $scope.selectedSessionSpeakerId = null;
  else
    $scope.selectedSessionSpeakerId = sess;
}

您的deleteSession函数没有收到任何参数。它只检查选定的Session唯一键并从数组中删除它：

$scope.deleteSession = function() {
  if($scope.selectedSessionSpeakerId) {
    let index = $scope.sessions.findIndex(finction(itm) {
      return itm["speakerId"] == $scope.selectedSessionSpeakerId;
    });
    $scope.sessions.splice(index, 1);
    $scope.selectedSessionSpeakerId = null;
  }
}

将对象传递到ng-repeat之外

2 个答案: