AngularJS mg-repeat项目,带有复选框,防止取消确认时出现默认值

时间:2017-03-27 16:39:26

标签: angularjs checkbox confirmation

我正在使用angular(第一版),我在尝试完成任务时遇到了麻烦。我有一个从服务器DB检索的项目列表。我将这些项列在HTML表中。我想在用户选中或取消选中复选框时动态更新布尔字段。问题出在确认期间。当我取消确认时,检查是否仍然保持其状态(检查/取消选中)并且不返回其先前的状态。我尝试使用“preventDefault”,它没有用。我尝试“刷新”项目数组,以便视图可以刷新数据,它不起作用。这是一个表达我所拥有的小提琴: 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
  }];
}

1 个答案:

答案 0 :(得分:1)

您必须通过id|codes|a|c|e 1|100 |1|0|0 2|102 |0|1|0 3|104 |0|0|1 函数中的$event

简单地替换:

ng-click

要:

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