Приложение AngularJS автоматически возвращается в исходное состояние

После того, как приложение отображает три списка дел, а затем после добавления новых данных, оно отображает обновленные списки на мгновение и возвращается в исходное состояние. Не могли бы вы сказать, почему он автоматически возвращается в исходное состояние?Приложение AngularJS автоматически возвращается в исходное состояние

ссылка для Pluker http://plnkr.co/edit/h6THusBe7AWFle5ixXzX?p=preview

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

    <head> 
    <link data-require="[email protected]*" 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}); 
     }; 
    } 
    ] 
);

источник

2015-03-12 Sungchan Lee

Удалить атрибут действия из формы или добавить «preventDefault» из t он нажимает кнопку.

Устранена 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}); 
};

источник

2015-03-12 15:32:27 Thomas

Вы должны удалить action атрибут из определения формы, в противном случае браузер будет пытаться представить его, перезагрузить страницу:

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

Демо: http://plnkr.co/edit/MwTmGqzdELzUbrY82kKg?p=preview

источник

2015-03-12 15:31:51 dfsq

отлично! спасибо большое –

Не стесняйтесь принять ответ, если это поможет. – dfsq

Приложение AngularJS автоматически возвращается в исходное состояние

ответ

Смежные вопросы