CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
Ramon Vasconcelos
Ramon Vasconcelos

Reputation: 945

AngularJS reloading page after remove element

I'm trying to remove an element inside ngRepeat. It's removing well, but after the element is removed, the page is reloaded. How can I prevent this reload action?

Heres the code:

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

js scope:

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

Upvotes: 1

Views: 1366

Answers (2)

Ramon Vasconcelos
Ramon Vasconcelos

Reputation: 945

<button> was acting like a submit (thanks to @Antiga), I tried to change it to input[type=button] but still didn't work.

I just made this change:

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

to:

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

And it worked well.

Upvotes: 1

Antiga
Antiga

Reputation: 2274

As per the W3C spec, the type is undefined and it's assuming a submit. Adding type='button' should resolve the issue for you.

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

Relevant specification if you're curious.

Upvotes: 4

Related Questions