AngularJS mg-repeat items with checkbox 防止默认取消确认

Question

我正在使用 angular（第一个版本），但我在尝试完成任务时遇到了问题。我有一个从服务器数据库中检索到的项目列表。我将这些项目列在 HTML table 中。当用户选中或取消选中复选框时，我想动态更新一个布尔字段。问题出在确认过程中。当我取消确认时，检查是否仍保留其状态 (check/uncheck) 并且不会返回到之前的状态。我尝试使用 "preventDefault"，它没有用。我尝试了 "refreshing" 项目数组，因此视图可能会刷新数据，但它没有用。这是 fiddle 代表我所拥有的： Fiddle

<div ng-app ng-controller="demoController">
  <h3>
    <span class="status">{{ status }}</span>
  </h3>
  <h2>
    Movies i've seen
  </h2>
  <table>
    <tr>
      <th>Name</th>
      <th>Have I seen it?</th>
    </tr>
    <tbody>
      <tr ng-repeat="movie in movies">
        <td> {{movie.name}}</td>
        <td style="text-align: center">
          <input value=" {{ movie.name }}" type="checkbox" ng-checked="movie.seen" ng-click="confirmSeen(this, $index)" /> </td>
      </tr>
    </tbody>
  </table>
</div>



 function demoController($scope) {
  $scope.status = "AngularJS is up";
  $scope.confirmSeen = function(e, idx) {
    var movie = $scope.movies[idx];
    if (movie !== undefined) {
        var msg = "";
      if(movie.seen) {
        msg = "Are you sure you want to mark " + movie.name + " as unseen?";
      } else {
        msg = "Are you sure you want to mark " + movie.name + " as seen?";
      }

      if (confirm(msg)) {
        movie.seen = !movie.seen;
        $scope.movies.splice(idx, 1, movie);
      } else {
        $scope.movies.splice(idx, 1, movie);
        e.stopImmediatePropagation();
        e.preventDefault();
      }
    } else {
      e.stopImmediatePropagation();
      e.preventDefault();
    }
  }
  $scope.movies = [{
    name: "Conan",
    seen: false
  }, {
    name: "Scarface",
    seen: true
  }, {
    name: "GhostBuster",
    seen: false
  }, {
    name: "The Shawshank Redemption",
    seen: true
  }, {
    name: "Goodfellas",
    seen: true
  }, {
    name: "Life",
    seen: false
  }];
}

Answer 1

您必须在 ng-click 函数中传递 $event。

只需替换：

 ng-click="confirmSeen(this, $index)"

收件人：

ng-click="confirmSeen($event, $index)"

AngularJS mg-repeat items with checkbox 防止默认取消确认

AngularJS mg-repeat items with checkbox preventing default on cancelled confirmation

checkbox

confirmation

angularjs