2014-10-30 77 views
1

我试图删除ngRepeat内的元素。它很好地移除,但在元素被移除后,页面被重新加载。我如何防止这种重新加载操作?AngularJS删除元素后重新加载页面

继承人的代码:

<li ng-repeat="task in tasks"> 
    <p>{{task.title}}</p> 
    <button ng-click="remove($index)">Click me</button> 
</li> 

JS范围:

$scope.remove = function($index){ 
    $scope.tasks.splice($index, 1); 
} 
+0

为什么会按钮点击重新加载页面?你确定你有按钮,没有链接一些href,而不是表单提交? – dfsq 2014-10-30 21:02:44

+1

听起来就像它是表单中唯一的按钮,它假设提交。通过阻止事件的默认操作或将结束标签移出结束标签之外来确认它。 – Antiga 2014-10-30 21:03:29

+0

@dfsq是的,它是一个'按钮'。 @Antiga我刚把它改成了'anchor',它工作正常!谢谢。顺便说一下,它不是'form' – 2014-10-30 21:07:53

回答

4

按照W3C规范,类型是不确定的,它的假设提交。添加type='button'应该为您解决问题。

<li ng-repeat="task in tasks"> 
    <p>{{task.title}}</p> 
    <button type="button" ng-click="remove($index)">Click me</button> 
</li> 

相关specification如果您好奇。

1

<button>表现得像submit(感谢@Antiga),我试图将其更改为input[type=button],但仍然无效。

我刚才提出这个变化:

<button ng-click="remove($index)">Click me</button> 

到:

<a ng-click="remove($index)">Click me</a> 

,效果不错。