Question

以下应用程序首先显示三个待办事项添加新数据后，它会暂时显示更新的列表并返回原始状态。你能告诉我为什么它会自动回到初始状态吗？

Pluker的链接

http://plnkr.co/edit/h6THusBe7AWFle5ixXzX?p=preview

==================================
<!DOCTYPE html>
<html ng-app="initExample">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body class="well" ng-controller="ExampleController">
  <h1> AngularJS Todo List</h1>
  <p> Total <strong> {{todolist.length}} </strong> / Remain <strong> {{countRemain()}} </strong> </p>
  <ul> 
    <li ng-repeat="todo in todolist" class="checkbox"> <input ng-model="todo.done" type="checkbox"> {{todo.title}}</li>
  </ul>  

  <form name="newItemForm" class="form-inline" action="">
    <div class="form-group">
      <label  class="sr-only" for="newItemText" placeholder="Type new ToDo"></label>
        <input type="text" class="form-control" ng-model="newTodo" name="newItemText" placeholder="Type new Todo">      
    </div>
    <button type="submit" ng-click="addNewTodo(newTodo)" class="btn btn-default"> Add </button>
  </form>
  </body>
</html>
============================
// Code goes here

var mymodule=angular.module('initExample', []);


mymodule.controller('ExampleController', 
  ['$scope', function($scope) {
      $scope.todolist = [
        {done: true, title:'AngularJS study'},
        {done: false, title:'music listening'},
        {done: false, title:'run'}
      ];

      $scope.countRemain = function() {
          var count = 0;
          var list = $scope.todolist;
          angular.forEach(list, function(val, key) {
            if(!list[key].done) count++;
          });
          return count;
      };

      $scope.addNewTodo = function(newTodo) {
        todolist.push({done: false, title: newTodo});
      };
    }
  ]
);

Answer 1

您需要从表单定义中删除action属性，否则浏览器会尝试提交它，重新加载页面：

<form name="newItemForm" class="form-inline">
   <!-- ... -->
</form>

演示：http://plnkr.co/edit/MwTmGqzdELzUbrY82kKg?p=preview

Answer 2

从表单中删除action属性或从单击按钮添加“preventDefault”。

修正了plunkr：

<form name="newItemForm" class="form-inline">

http://plnkr.co/edit/KFpbbdlDPbnIPAW43EaG?p=preview

P.S。还修复了addNewTodo函数：

$scope.addNewTodo = function(newTodo) {
    $scope.todolist.push({done: false, title: newTodo});
};

AngularJS应用程序会自动返回初始状态

2 个答案: