Callum Callum - 4 months ago 35
Javascript Question

Delete AngularUI Accordion on ng-repeat

So I'm trying to add a delete function to my ng-repeating accordion.
The button is displayed and the function is set up, but when the delete button is pressed the page reloads almost and then redirects to localhost:8080/# however it should not redirect to here, and there is nothing suggesting it should redirect to here, not that I can see anyway, maybe this is one of the problems? However I'm unable to see were this would originate from..

As the application isn't hosted yet once the page is refreshed, all of the data is lost, as it is passed to the current editing view, by the view before it, which displays them in a table until you click on one of the rows and get taken to said editing page.

Here is my JS delete function:

$scope.delete = function (index, event) {
if(event) {
event.preventDefault();
event.stopPropagation();
}

$scope.selectedTestScript.Actions.splice(index, 1);
}


And here is my ng-repeat accordion:

<uib-accordion close-others="oneAtATime">
<uib-accordion-group ng-repeat="action in selectedTestScript.Actions" is-open="action.isOpen" ng-click="action.isOpen=!action.isOpen">
<uib-accordion-heading>
<div>{{action.Description}}<button type="button" class="btn btn-xs btn-danger pull-right" ng-click="delete($index, event)"></i>Delete</button></div>
</uib-accordion-heading>
<div>
<label for="actionNotes" class="control-label col-xs-2">Action Notes</label>
<div class="col-xs-10">
<textarea id="actionNotes" type="text" rows="4"ng-model="action.Notes" class="form-control" name="name"></textarea>
</div>
</div>
<div>
<label for="actionExpected" class="control-label col-xs-2">Action Expected</label>
<div class="col-xs-10">
<input id="actionExpected" type="text" ng-model="action.ExpectedOutcome" class="form-control" name="name">
</div>
</div>
</uib-accordion-group>
</uib-accordion>


Any help would be much appreciated, I've tried simplifying the function and removing the if(event) statement and leaving it as a splice, but this also doesn't work.

Thanks in advance.

Answer

I guess you have a form surrounding the code you posted? If that is the case, using <button> with no type specified defaults it to type=submit, which triggers the original HTML form submit, thus the redirect.

You can set type to button to prevent that from happening.

Also action.isOpen==!action.isOpen doesn't look correct, do you mean single =?


Edit: There is actually a paragraph under ui-bootstrap accordion that reads

Known issues

To use clickable elements within the accordion, you have to override the accordion-group template to use div elements instead of anchor elements, and add cursor: pointer in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.

http://angular-ui.github.io/bootstrap/#/accordion

Comments