Angularjs 양식에서 다차원 JSON을 게시해야합니다.

각도가 새롭습니다. 나는 다차원 유형 json을 필요로한다. mycode은 내가 JSON의 형식을 필요Angularjs 양식에서 다차원 JSON을 게시해야합니다.

보기 페이지 컨트롤러

var app = angular.module('app', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
\t $scope.menu \t = \t {}; 
 
     $scope.menus \t = \t [ 
 
\t \t {"menuID":"1","sub_menu":"N","name":"dashboard","sub_menus":""}, 
 
\t \t {"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":""}]}, 
 
\t \t {"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":""}]}, 
 
\t \t {"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":""}]} 
 
\t ]; 
 

 
\t $scope.submit \t = \t function(){ 
 
\t \t // alert(JSON.stringify($scope.menu)); 
 
\t \t console.error(JSON.stringify($scope.menu)); 
 
\t } 
 
\t 
 
}); 
 

 

 
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>

아래와 같습니다 :

모든 확인란이 선택 및 사후 양식 후.

출처

2017-04-02 deep gagan

우리가 도울 경우 , 당신은 정답을 표시 할 것입니다? – lin

샘플 JSON을 이미지가 아닌 형식이 지정된 텍스트로 추가하십시오. 텍스트로 읽는 것이 훨씬 쉽습니다. – halfer

{ "1"을 "1", "2": { "1": { "1"을 "1", "2", "2" } "2", "2 " "3 ""3 ", "4 ""4 " 를} "3 "{ "5 ""5 ", "6 ":"6 ", "7 " "7", "8": "8" 를} "4"{ "9" "9", "10" "10" } "5" "5" , "6": "6", "7": "7", "8": "8", "9" "9", "10" "10" } –

예제에서는 모든 체크 박스를 선택하면 코드 단편에서 요구 사항에 따라 개체 구조가 만들어집니다. 그러나 사용자가 선택하지 않은 상자를 사용하면 값이 false로 변경됩니다 (향후 요구 사항에 따라이 작업을 수행 할 수 있음).

답변을 보려면 아래 스 니펫을 참조하십시오.

var app = angular.module('app', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.mainMenu = {}; 
 
    $scope.submenu = {}; 
 
    $scope.pagemenu ={}; 
 
\t $scope.menu \t = \t {}; 
 
     $scope.menus \t = \t [ 
 
\t \t {"menuID":"1","sub_menu":"N","name":"dashboard","sub_menus":""}, 
 
\t \t {"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":""}]}, 
 
\t \t {"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":""}]}, 
 
\t \t {"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":""}]} 
 
\t ]; 
 
    
 
    $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); 
 
    } 
 
    
 

 
\t $scope.submit \t = \t function(){ 
 
\t \t // alert(JSON.stringify($scope.menu)); 
 
\t \t console.log(JSON.stringify($scope.menu)); 
 
    \t console.log($scope.menu); 
 
\t } 
 
\t 
 
});

<!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>

출처

2017-04-02 11:12:17 Dhiraj

안녕하세요 Dhiraj 그것은 일부 단계를 제공 할 수있는 적절한 값 –

을주지 않는다 잘못된 가치를 만들어내는 것.? – Dhiraj

선택 메뉴와 하위 메뉴가 제공 될 때 : - { "1"을 "1", "2": { "1"을 "1", "2", "2" } " 3 ": { "1 "을"1 ", "2 ","2 " } "4 "{ "1 "을"1 ", "2 ","2 " } } –

Angularjs 양식에서 다차원 JSON을 게시해야합니다.

답변

관련 문제