Javascript angularJS重复错误
我尝试在一些更改之后刷新数据,但我得到的只是ng repeat中的重复错误 情况是, 我尝试构建一个动态菜单模块 您需要添加、删除、更改顺序并分配给不同的主菜单项等 除了在表中重新加载菜单结构外,其他一切都可以正常工作 我清除了原始对象,表卸载并没有显示任何数据,然后我尝试以更改后的形式重新加载数据,出现dupes错误。重新编辑浏览器后,所有内容都会按原样更新并正确显示,直到下一次更新 由于缩进和顺序可能会改变,我无法真正推动和拼接阵列 代码 模块Javascript angularJS重复错误,javascript,angularjs,directive,Javascript,Angularjs,Directive,我尝试在一些更改之后刷新数据,但我得到的只是ng repeat中的重复错误 情况是, 我尝试构建一个动态菜单模块 您需要添加、删除、更改顺序并分配给不同的主菜单项等 除了在表中重新加载菜单结构外,其他一切都可以正常工作 我清除了原始对象,表卸载并没有显示任何数据,然后我尝试以更改后的形式重新加载数据,出现dupes错误。重新编辑浏览器后,所有内容都会按原样更新并正确显示,直到下一次更新 由于缩进和顺序可能会改变,我无法真正推动和拼接阵列 代码 模块 "use strict"; // no dep
"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'
};
});
List指令将实际表的作用域移动到模块控制器
angular.module('appWebmenu').directive('appWebmenuList', function() {
return {
transclude: true,
templateUrl: 'external/appWebmenu/appWebmenuListTemplate.html',
controller: 'appWebmenuController',
scope: false
}
});
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
}]);
模板
<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>
正在加载的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)跟踪等方法,但这并没有什么区别,或者实际上使情况变得更糟
我希望有人能帮我解决这个问题。我发现了问题。由于php返回了两次输出,因此生成了错误。因此确实存在重复的地方,因为json对象是重复的。我猜是新手犯的错误。我忘了清除一个变量
奇怪的是,在两个单独的请求之间,php中保留了一个内部类变量。您能提供一个提琴,或者您正在检索的数据的示例吗?他说,我在帖子中添加了json。所有代码都在那里。它的每一部分。