Question

我是AngularJS的新手我希望以适当的格式获得后期值。我用的时候字段名称作为复选框中的键，它给出了正确的值但是当我使用id作为键时它不会。

给出下面的代码，名称为关键

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.mainMenu = {};
  $scope.submenu = {};
  $scope.pagemenu ={};
  $scope.menu   = {};
  
  $scope.menus  = [
    {"menuID":"11","sub_menu":"N","name":"dashboard","sub_menus":""},
    {"menuID":"1","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":"2","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"3","name":"help1","page":"N","pages":""},{"sub_menuID":"4","name":"help2","page":"N","pages":""}]},
    {"menuID":"3","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"5","name":"contact1","page":"N","pages":""},{"sub_menuID":"6","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]);
    } */
    
    $scope.menu=Object.assign({},$scope.mainMenu, $scope.submenu,$scope.pagemenu);
    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.name]" 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.name][subMenu.name]" 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.name][subMenu.name][page.name]"  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>

以id为键的代码

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.mainMenu = {};
  $scope.submenu = {};
  $scope.pagemenu ={};
  $scope.menu   = {};
  $scope.menus  = [
    {"menuID":"11","sub_menu":"N","name":"dashboard","sub_menus":""},
    {"menuID":"1","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":"2","sub_menu":"Y","name":"help","sub_menus":[{"sub_menuID":"3","name":"help1","page":"N","pages":""},{"sub_menuID":"4","name":"help2","page":"N","pages":""}]},
    {"menuID":"3","sub_menu":"Y","name":"contact","sub_menus":[{"sub_menuID":"5","name":"contact1","page":"N","pages":""},{"sub_menuID":"6","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]);
    }*/
    
    $scope.menu=Object.assign({},$scope.mainMenu, $scope.submenu,$scope.pagemenu);
    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 ng-repeat Post Value无法获得正确的模式

0 个答案: