我尝试在一些改动之后刷新数据,但我得到的是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),但没有区别,或实际上使情况变得更糟。
我希望有人可以帮我解决这个问题。
答案 0 :(得分:0)
我发现了问题。生成错误,因为php返回输出两次。所以确实存在重复,因为重复了json对象。我想是菜鸟错误。我忘了清除一个变量。
很奇怪虽然是在单独的请求之间,但是仍保留了php中的内部类变量。