angularJS Dupes错误

时间:2015-11-18 01:16:50

标签: javascript angularjs directive

我尝试在一些改动之后刷新数据,但我得到的是ng-repeat中的dupes错误。

案件是;

我尝试构建动态菜单模块

您需要添加,删除,更改订单并分配给其他主菜单项等。

除了在表格中重新加载菜单结构外,一切都有效。

我清除原始对象,表卸载并显示没有数据,然后我尝试以更改的形式重新加载数据,并出现dupes错误。重新编码浏览器后,所有内容都会按原样更新并正确显示,直到下次更新。

我无法真正推送和拼接数组,因为缩进因为订单可能只是改变了

代码

模块

"use strict";
// no dependencies
angular.module('appWebmenu', []);

主要指令

'use strict';

angular.module('appWebmenu').directive('appWebmenu',function() {
    return {
        scope:false,
        controller: 'appWebmenuController',
        templateUrl: 'external/appWebmenu/appWebmenuTemplate.html'
    };
});

列表指令实际表范围已移至模块控制器

angular.module('appWebmenu').directive('appWebmenuList', function() {
    return {
        transclude: true,
        templateUrl: 'external/appWebmenu/appWebmenuListTemplate.html',
        controller: 'appWebmenuController',
        scope: false
    }
});

模板

<div ng-if="!listLoaded">
    <i class="fa fa-spinner fa-spin fa-3x"></i>
</div>

<div ng-if="listError">
    {{ 'ERROR_LOADING' | translate }}
</div>

<div ng-if="listLoaded && !listError && itemList">
    <table class="webmenu-table-main">

        <thead>
            <tr>
                <th>{{'PAGE' | translate}}</th>
                <th>{{'LANGUAGE' | translate}}</th>
                <th>{{'ACTIONS' | translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='item in itemList'>
                <td>{{item.sub}}{{item.menu_name}}</td>
                <td>{{item.lang_name}}</td>
                <td>
                    <i class="fa fa-pencil-square" title="{{ 'EDIT' | translate }}" ng-click="details(item.menu_id)" ng-if="item.menu_is_editable != '0'"></i>
                    <i class="fa fa-trash-o" title="{{ 'DELETE' | translate }}" ng-click="remove(item.menu_id)" ng-if="item.menu_is_removable != '0'"></i>
                    <i class="fa fa-plus" title="{{ 'ADDMENU' | translate }}" ng-click="addNewMenuItem(item.menu_id)"></i>
                    <i class="fa fa-external-link-square" title="{{ 'OPENEDITOR' | translate }}" ng-click="openInEditor(item.menu_id)" ng-if="item.menu_is_editable != '0'"></i>
                </td>
            </tr>
        </tbody>
    </table>
</div>

最后是控制器

angular.module('appWebmenu').controller('appWebmenuController', ['$scope', 'dataService', 'webmenuService', 'loadService', function ($scope, dataService, webmenuService, loadService) {

    $scope.title = "Site menu pagina's"
    // different settings to control view and loading
    $scope.showItem = false;
    $scope.shop_id = dataService.getUserShopId();
    $scope.token = dataService.getUserToken();
    $scope.itemList = undefined;
    $scope.listLoaded = false;
    $scope.listError = false;
    $scope.itemLoaded = false;
    $scope.langLoaded = false;
    $scope.typeLoaded = false;
    $scope.itemAction = null;

    // Show the form to add a new Menu item
    $scope.newMenuItem = function () {
        // retrieve the existing items to create possible submenu items
        $scope.itemList = dataService.getWebmenuList();

        // load the languages available
        $scope.languages = dataService.getLanguages();

        // load predefined pagetype
        $scope.pageTypes = dataService.getPageTypes();

        // clear any previous set data for the single item
        $scope.item = {};


        // create option list for selects
        $scope.parentOptions = {
            selected: '',
            options : $scope.itemList
        };
        $scope.langOptions = {
            selected: $scope.item.menu_lang_id,
            options : $scope.languages
        };
        $scope.pageOptions = {
            selected: $scope.item.menu_type,
            options : $scope.pageTypes
        };

        // everything loaded so form may be shown
        $scope.showItem = true;

        // list is loaded
        $scope.listLoaded = true;

        // item is cleared
        $scope.itemLoaded = true;

        // types are loaded
        $scope.typeLoaded = true;

        // submit action to differentiate between new items and updated items
        $scope.itemAction = 'new';
    };
    // function to clear the item and hide the form without saving the data
    $scope.cancel = function(){
        $scope.showItem = !$scope.showItem;
        $scope.item = "";
    };
    // show the list table
    $scope.getItemList = function () {
        // get the data
        $scope.itemList = dataService.getWebmenuList();
        if ($scope.itemList === undefined) {
            // if not already there, retrieve it form server
            $scope.itemList = webmenuService.getWebmenuList($scope.shop_id, $scope.token)
                .then(
                    function (data) {
                        // data retrieved and stored in shared objects and retireved from stored object for use
                        $scope.itemList = dataService.getWebmenuList();
                        $scope.listLoaded = true;
                    },

                    function (data) {
                        // error handling
                        $scope.listLoaded = false;
                        $scope.listError = true;
                        alert(data.errorMessage);
                    });

        }
        // list was already preloaded
        else {
            $scope.listLoaded = true;
        }
    };
    // function to show form for updating menu item

    $scope.details = function (menuid) {

        $scope.itemList = dataService.getWebmenuList();
        $scope.languages = dataService.getLanguages();
        $scope.pageTypes = dataService.getPageTypes();
        // get single item from list
        $scope.item = webmenuService.filterWebmenu($scope.itemList,menuid);
        // check if data is there
        if ($scope.item.menu_id > 0) {

            $scope.parentOptions = {
                selected: $scope.item.menu_parent_id,
                options : $scope.itemList
            };
            $scope.langOptions = {
                selected: $scope.item.menu_lang_id,
                options : $scope.languages
            };
            $scope.pageOptions = {
                selected: $scope.item.menu_type,
                options : $scope.pageTypes
            };
            $scope.itemLoaded = true;
            $scope.langLoaded = true;
            $scope.typeLoaded = true;
            $scope.showItem = true;
            $scope.itemAction = 'edit';
        }

    };
    // safe the data on the server
    $scope.safeMenu = function(menu_id, menu_parent_id, menu_lang_id, menu_type, menu_name, menu_order, menu_active){
        // init the item
        $scope.item = {};

        $scope.item.menu_parent_id = menu_parent_id;
        $scope.item.menu_lang_id = menu_lang_id;
        $scope.item.menu_type = menu_type;
        $scope.item.menu_name = menu_name;
        $scope.item.menu_order = menu_order;
        $scope.item.menu_active = menu_active;

        if($scope.itemAction == 'edit') {
            $scope.item.menu_id = menu_id;
            // save updates
            $scope.outcome = webmenuService.updateItem($scope.shop_id, $scope.token, $scope.item)
                .then(
                function(){
                    // and here is whare it all goes wrong
                    // I hide the form and clear it off data
                    $scope.showItem = false;
                    $scope.item = {};

                    // here I clear the existing list. The 
                    $scope.itemList = {}; // The table in the view clears also nice and clean
                    /* Here I try to reload the data and the error occures. 
                    * I dont know why, because table is empty, ItemList is 
                    * empty, item is empty, data is loaded after update to 
                    * the dataService and retrieved for new showing. But all                 
                    * I get is a rather long error about dupes, and the angular 
                    * documentation is not really helpful at this point
                    */ 
                    $scope.getItemList()
                },
                function(reason){
                    alert(reason);
                });
        }
        if($scope.itemAction == 'new') {

            $scope.outcome = webmenuService.safeNewItem($scope.shop_id, $scope.token, $scope.item)
                .then(
                function(){
                    // same as above
                    $scope.showItem = false;
                    $scope.item = {};
                    $scope.itemList = {};
                    $scope.getItemList();

                },
                function(reason){
                    alert(reason);
                });
        }
    };
    // function to show new item form with a parent selected from the table view
    $scope.addNewMenuItem = function (parent_id) {
        console.log("adding a new child to the menu");
        $scope.item = {};
        $scope.showItem = true;
        $scope.listLoaded = true;
        $scope.itemLoaded = true;
        $scope.itemAction = 'new';

        $scope.item.menu_parent_id = parent_id;

        $scope.languages = dataService.getLanguages();
        $scope.pageTypes = dataService.getPageTypes();

        $scope.parentOptions = {
            selected: parent_id,
            options : $scope.itemList
        };
        $scope.langOptions = {
            selected: $scope.item.menu_lang_id,
            options : $scope.languages
        };
        $scope.pageOptions = {
            selected: $scope.item.menu_type,
            options : $scope.pageTypes
        };
    };

    // loading of languages
    $scope.getLanguageOptions = function(){
        $scope.languages = dataService.getLanguages();
        if(!$scope.languages){
            $scope.languages = loadService.getLanguages($scope.shop_id, $scope.token)
                .then(function(){
                    $scope.languages = dataService.getLanguages();
                    $scope.langLoaded = true;
                });
        }
        return $scope.languages;
    };

    // loading of pagetypes
    $scope.getPageTypeOptions = function(){
        $scope.pageTypes = dataService.getPageTypes();
        if(!$scope.pageTypes){
            $scope.pageTypes = loadService.getPageTypes($scope.shop_id, $scope.token)
                .then(function(){
                    $scope.pageTypes = dataService.getPageTypes();
                    $scope.typeLoaded = true;
                });
        }
        return $scope.pageTypes;
    };

    $scope.getItemList();          // init the template by autoloading the content
    $scope.getLanguageOptions();   // preloading the languages
    $scope.getPageTypeOptions();   // preloading the pagetypes
}]);

正在加载的JSON

{
    0: {
        menu_id: "1",
        menu_parent_id: "0",
        menu_site_id: "1",
        menu_lang_id: "0",
        menu_name: "Site",
        menu_class: "",
        menu_type: "0",
        menu_link: "",
        menu_is_item: "0",
        menu_order: "1",
        menu_is_editable: "0",
        menu_is_removable: "0",
        menu_active: "0",
        menu_deleted: "0"
    },
    1: {
        menu_id: "5",
        menu_parent_id: "1",
        menu_site_id: "1",
        menu_lang_id: "1",
        menu_name: "Home",
        menu_class: "Cms",
        menu_type: "1",
        menu_link: "Cms/page/Home",
        menu_is_item: "1",
        menu_order: "1",
        menu_is_editable: "1",
        menu_is_removable: "1",
        menu_active: "1",
        menu_deleted: "0",
        lang_id: "1",
        lang_name: "Nederlands",
        lang_code: "nl",
        lang_active: "1",
        sub: "    "
    },
    2: {
        menu_id: "9",
        menu_parent_id: "1",
        menu_site_id: "1",
        menu_lang_id: "1",
        menu_name: "Over ons",
        menu_class: "Cms",
        menu_type: "1",
        menu_link: "Cms/page/Overons",
        menu_is_item: "1",
        menu_order: "2",
        menu_is_editable: "1",
        menu_is_removable: "1",
        menu_active: "1",
        menu_deleted: "0",
        lang_id: "1",
        lang_name: "Nederlands",
        lang_code: "nl",
        lang_active: "1",
        sub: "    "
    },
    3: {
        menu_id: "10",
        menu_parent_id: "9",
        menu_site_id: "1",
        menu_lang_id: "1",
        menu_name: "Bedrijfsgeschiedenis",
        menu_class: "Cms",
        menu_type: "1",
        menu_link: "Cms/page/Bedrijfsgeschiedenis",
        menu_is_item: "1",
        menu_order: "1",
        menu_is_editable: "1",
        menu_is_removable: "1",
        menu_active: "1",
        menu_deleted: "0",
        lang_id: "1",
        lang_name: "Nederlands",
        lang_code: "nl",
        lang_active: "1",
        sub: "        "
    },
    4: {
        menu_id: "6",
        menu_parent_id: "1",
        menu_site_id: "1",
        menu_lang_id: "1",
        menu_name: "Contact",
        menu_class: "Cms",
        menu_type: "1",
        menu_link: "Cms/page/Contact",
        menu_is_item: "1",
        menu_order: "3",
        menu_is_editable: "1",
        menu_is_removable: "1",
        menu_active: "1",
        menu_deleted: "0",
        lang_id: "1",
        lang_name: "Nederlands",
        lang_code: "nl",
        lang_active: "1",
        sub: "    "
    },
    5: {
        menu_id: "7",
        menu_parent_id: "6",
        menu_site_id: "1",
        menu_lang_id: "1",
        menu_name: "Adres",
        menu_class: "Cms",
        menu_type: "1",
        menu_link: "Cms/page/Adres",
        menu_is_item: "1",
        menu_order: "0",
        menu_is_editable: "1",
        menu_is_removable: "1",
        menu_active: "1",
        menu_deleted: "0",
        lang_id: "1",
        lang_name: "Nederlands",
        lang_code: "nl",
        lang_active: "1",
        sub: "        "
    },
    6: {
        menu_id: "8",
        menu_parent_id: "6",
        menu_site_id: "1",
        menu_lang_id: "1",
        menu_name: "Routebeschrijving",
        menu_class: "Cms",
        menu_type: "1",
        menu_link: "Cms/page/Routebeschrijving",
        menu_is_item: "1",
        menu_order: "2",
        menu_is_editable: "1",
        menu_is_removable: "1",
        menu_active: "1",
        menu_deleted: "0",
        lang_id: "1",
        lang_name: "Nederlands",
        lang_code: "nl",
        lang_active: "1",
        sub: "        "
    },
    7: {
        menu_id: "2",
        menu_parent_id: "0",
        menu_site_id: "1",
        menu_lang_id: "0",
        menu_name: "Responses",
        menu_class: "",
        menu_type: "0",
        menu_link: "",
        menu_is_item: "0",
        menu_order: "2",
        menu_is_editable: "0",
        menu_is_removable: "0",
        menu_active: "0",
        menu_deleted: "0"
    },
    8: {
        menu_id: "11",
        menu_parent_id: "2",
        menu_site_id: "1",
        menu_lang_id: "1",
        menu_name: "Mail verzonden",
        menu_class: "Cms",
        menu_type: "1",
        menu_link: "Cms/page/Mailverzonden",
        menu_is_item: "1",
        menu_order: "1",
        menu_is_editable: "1",
        menu_is_removable: "1",
        menu_active: "1",
        menu_deleted: "0",
        lang_id: "1",
        lang_name: "Nederlands",
        lang_code: "nl",
        lang_active: "1",
        sub: "    "
    }
}

我尝试跟踪$ index,跟踪数组中的一些独特项目(menu_id),但没有区别,或实际上使情况变得更糟。

我希望有人可以帮我解决这个问题。

1 个答案:

答案 0 :(得分:0)

我发现了问题。生成错误,因为php返回输出两次。所以确实存在重复,因为重复了json对象。我想是菜鸟错误。我忘了清除一个变量。

很奇怪虽然是在单独的请求之间,但是仍保留了php中的内部类变量。