Hi,

I have an accordion type Macro control which has its properties residing in the side panel.

I can add panels to the accordion fine but if I want to Delete a panel from the accordion I use the splice to remove the item from the scope array but before I get chance to save the accordion the side panel closes.

My HTML looks like this:

<div class="simple-slider-list simple-slider-list-field" ng-class="{'simple-slider-open':selected == slide}" ng-click="select(slide)" ng-repeat="slide in model.value | orderBy: 'order'">

        <span class="simple-slider-list-number">
            {{slide.name}}
            <!--<i class="icon right icon-navigation"></i>-->
            <i ng-click="removeAccordionPanel(slide)" class="icon right icon-delete"></i>
        </span> 
        <div class="simple-slider-list-field">
            Order:   <select name="mySelect" id="mySelect" style="width: 60px !important;"
                             ng-options="option for option in availableOptions track by option"
                             ng-model="slide.liveorder"></select>
        </div>
        <div class="simple-slider-list-field">
            Title: <input type="text" placeholder="Title" ng-model="slide.name" />
        </div>
        <umb-editor model="slide.rte" ng-model="slide.rte"></umb-editor>
    </div>

</div>

<div class="simple-slider-list-add-row">
    <i ng-click="add()" class="icon right icon-add"></i>
</div>

My AngularJS controller looks like:

angular.module("umbraco").controller("AccordionEditor.controller",
function ($scope, assetsService, $http, dialogService, mediaHelper) {

    var defaultItem = {
        name: "", summary: "", img: "", link: undefined, order: undefined, liveorder: undefined, rte: {
            label: 'bodyText',
            description: '...',
            view: 'rte',
            config: {
                editor: {
                    toolbar: ["code", "removeformat", "link", "unlink", "bold", "italic", "underline", "strikethrough"],
                    stylesheets: [],
                    dimensions: {
                        height: 200
                    }
                }
            }
        }
    };

    if (!$scope.model.value) {
        $scope.model.value = [];
        $scope.availableOptions = [];
    }

    if ($scope.model.value.length > 0) {
        $scope.selected = $scope.model.value[0];
        var count = 0;
        $scope.availableOptions = [];
        angular.forEach($scope.model.value, function (value, key) {
            count = count + 1;
            $scope.availableOptions.push(count);
        });

    }

    $scope.select = function (index) {
        $scope.selected = index;
        $scope.SelectedIndex = this.$index;

    };

    $scope.add = function () {
        $scope.model.value.splice($scope.model.value.length + 1, 0, angular.copy(defaultItem));
        $scope.selected = $scope.model.value[$scope.model.value.length - 1];
        $scope.SelectedIndex = $scope.model.value.length - 1;
        $scope.availableOptions.push($scope.model.value.length);
        $scope.model.value[$scope.model.value.length - 1].liveorder = $scope.model.value.length;
    };

    $scope.pick = function (slide) {
        dialogService.mediaPicker({
            multiPicker: false,
            callback: function (data) {
                slide.img = mediaHelper.resolveFile(data, false);
            }
        });
    };

    $scope.pickContent = function (slide) {
        dialogService.treePicker({
            multiPicker: false,
            section: "content",
            treeAlias: "content",
            callback: function (data) {
                slide.link = { name: data.name, id: data.id };
            }
        });
    };


    $scope.$on("formSubmitting", function (ev, args) {

        angular.forEach($scope.model.value, function (value, key) {
            value.rte = $scope.regrouppanels(value);
            value.order = value.liveorder;
        });
    });

    $scope.regrouppanels = function (slide) {
        return slide.rte = {
            label: 'bodyText',
            description: '...',
            view: 'rte',
            value: slide.rte.value,
            config: {
                editor: {
                    toolbar: ["code", "removeformat", "link", "unlink", "bold", "italic", "underline", "strikethrough"],
                    stylesheets: [],
                    dimensions: {
                        height: 200
                    }
                }
            }
        }
    };

    $scope.removeAccordionPanel = function (index) {
        $scope.model.value.splice($scope.model.value.indexOf(index), 1);
    };

    assetsService.loadCss("/App_Plugins/CarouselEditor/assets/CarouselEditor.css");

});

Looking at the code above this is my Delete panel function:

$scope.removeAccordionPanel = function (index) {
        $scope.model.value.splice($scope.model.value.indexOf(index), 1);
    };

As soon as the $scope.model.value is reduced in size it closes the panel - It doesnt throw an error.

Any ideas?

Jon