Question

我是棱角分明的新人。我需要多维类型的json。 mycode在下面给出

查看页面控制器

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
	$scope.menu 	=	{};
        $scope.menus 	=	[
		{"menuID":"1","sub_menu":"N","name":"dashboard","sub_menus":""},
		{"menuID":"2","sub_menu":"Y","name":"settings","sub_menus":[{"sub_menuID":"1","name":"settings1","page":"Y","pages":[{"pageID":"1","name":"page1"},{"pageID":"2","name":"page2"}]},{"sub_menuID":"2","name":"settings2","page":"N","pages":""}]},
		{"menuID":"3","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"1","name":"help1","page":"N","pages":""},{"sub_menuID":"2","name":"help2","page":"N","pages":""}]},
		{"menuID":"4","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"1","name":"contact1","page":"N","pages":""},{"sub_menuID":"2","name":"contact2","page":"N","pages":""}]}
	];

	$scope.submit	=	function(){
		// alert(JSON.stringify($scope.menu));
		console.error(JSON.stringify($scope.menu));
	}
	
});


html view page

<!DOCTYPE html>
<html>
<head>
  <title>rules</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
  <script src="mainCtrl.js"></script>
</head>
<body ng-app="app">
  
 <div ng-controller="MainCtrl">
      <form ng-submit="submit()">
      <ul>
        <li ng-repeat="x in menus">
          <input type="checkbox" ng-model="menu[x.menuID]" ng-true-value="'{{x.menuID}}'">{{x.name}}
          <ul ng-if="[x.sub_menu] == 'Y'">
            <li ng-repeat="subMenu in x.sub_menus">
              <input type="checkbox" ng-model="menu[x.menuID][subMenu.sub_menuID]">{{subMenu.name}}
              <ul ng-if="[subMenu.page] == 'Y'">
                <li ng-repeat="page in subMenu.pages">
                  <input type="checkbox" ng-model="menu[x.name][subMenu.name][page.pageID]">{{page.name}}
                </li>
              </ul>
            </li> 
          </ul>
        </li>
      </ul>
      <button>Submit</button>
      </form>
  </div>
</body>
</html>

我需要这种JSON格式：

选中所有复选框并发布表单。

Answer 1

如果选中了所有复选框，则代码段中的示例将根据要求创建对象结构。但是，如果用户取消选中框，它将仅将值更改为false（您可以根据需要在将来对此进行处理）。

请参阅以下代码段以获取答案。

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.mainMenu = {};
  $scope.submenu = {};
  $scope.pagemenu ={};
	$scope.menu 	=	{};
        $scope.menus 	=	[
		{"menuID":"1","sub_menu":"N","name":"dashboard","sub_menus":""},
		{"menuID":"2","sub_menu":"Y","name":"settings","sub_menus":             [{"sub_menuID":"1","name":"settings1","page":"Y","pages":[{"pageID":"1","name":"page1"},{"pageID":"2","name":"page2"}]},{"sub_menuID":"2","name":"settings2","page":"N","pages":""}]},
		{"menuID":"3","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"1","name":"help1","page":"N","pages":""},{"sub_menuID":"2","name":"help2","page":"N","pages":""}]},
		{"menuID":"4","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"1","name":"contact1","page":"N","pages":""},{"sub_menuID":"2","name":"contact2","page":"N","pages":""}]}
	];
  
  $scope.assignValue = function(menuId,submenuId,pageId){
/*  if(!$scope.mainMenu[menuId]&&!$scope.submenu[menuId]&&!$scope.pagemenu[menuId]){
    delete($scope.mainMenu[menuId]);
    delete($scope.submenu[menuId]);
    delete($scope.pagemenu[menuId]);
  }*/

if(pageId!=undefined && !$scope.pagemenu[menuId][submenuId][pageId]){
    delete($scope.pagemenu[menuId][submenuId][pageId]);
    if(Object.keys($scope.pagemenu[menuId][submenuId]).length === 0){
       delete($scope.pagemenu[menuId][submenuId]);
  }
  }
  
  if(submenuId!=undefined && $scope.submenu[menuId][submenuId]!=undefined && !$scope.submenu[menuId][submenuId] && Object.keys($scope.submenu[menuId][submenuId]).length === 0){
    delete($scope.submenu[menuId][submenuId]);
   
  }

    if(Object.keys($scope.menu).length === 0){
        $scope.menu=Object.assign({},$scope.mainMenu,$scope.submenu);
    }else{
        $scope.menu[menuId] = $scope.mainMenu[menuId];
    }
  
    var tempObj = Object.assign({},$scope.submenu[menuId],$scope.pagemenu[menuId]);
    if(Object.keys(tempObj).length != 0){
        $scope.menu[menuId] = tempObj
    }
  
  
  console.log($scope.menu);
  }
  

	$scope.submit	=	function(){
		// alert(JSON.stringify($scope.menu));
		console.log(JSON.stringify($scope.menu));
    	console.log($scope.menu);
	}
	
});

<!DOCTYPE html>
<html>
<head>
  <title>rules</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
  <script src="mainCtrl.js"></script>
</head>
<body ng-app="app">
  
 <div ng-controller="MainCtrl">
      <form ng-submit="submit()">
      <ul>
        <li ng-repeat="x in menus">
          <input type="checkbox" ng-change= "assignValue(x.menuID)" ng-model="mainMenu[x.menuID]" ng-true-value="'{{x.menuID}}'">{{x.name}}
          <ul ng-if="[x.sub_menu] == 'Y'">
            <li ng-repeat="subMenu in x.sub_menus">
              <input type="checkbox" ng-model="submenu[x.menuID][subMenu.sub_menuID]" ng-true-value="'{{subMenu.sub_menuID}}'" ng-change= "assignValue(x.menuID,subMenu.sub_menuID,null)">{{subMenu.name}}
              <ul ng-if="[subMenu.page] == 'Y'">
                <li ng-repeat="page in subMenu.pages">
                  <input type="checkbox" ng-model="pagemenu[x.menuID][subMenu.sub_menuID][page.pageID]"  ng-true-value="'{{page.pageID}}'" ng-change= "assignValue(x.menuID,subMenu.sub_menuID,page.pageID)">{{page.name}}
                </li>
              </ul>
            </li> 
          </ul>
        </li>
      </ul>
      <button>Submit</button>
      </form>
  </div>
</body>
</html>

需要从Angularjs表单发布多维JSON

1 个答案: