Question

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

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

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

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);
  }
  
});

以id为键的代码

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

  @Id
        @GeneratedValue(generator = "uuid")
        @GenericGenerator(name = "uuid", strategy = "uuid" )
    private String id;

Answer 1

我执行了你的代码并比较了结果。我想出的唯一区别是你想要钥匙的顺序。

在json中，没有订购密钥的含义。此外，您的密钥是数字，因此它们按升序排列。

这是v8处理关联数组的方式。已知问题问题164但遵循规范，因此标记为“按预期工作”。循环遍历关联数组没有必需的顺序。

一个简单的解决方法是在数字值前加上字母，例如：'size_7'：['9149'，'9139']等。

该标准将在下一个ECMAScript规范中发生变化，迫使[chrome]开发人员更改此内容。

所以无需担心订单。您可以使用密钥访问它，因为这就是json的使用方式。

如果你需要订购，那么你需要一些肮脏的hacky方法，这将迫使你将你的密钥重命名为其他东西或创建json的子对象。

对于您的情况，hacky方式是在除_之外的所有menuIds之前添加11

这将使您的菜单数组如下所示

  $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":""}]}
  ];

这将为您提供所需的11输出作为第一个元素，_1，_2和_3跟随它。

以下是代码段。

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) {
    $scope.menu = Object.assign({}, $scope.mainMenu, $scope.submenu, $scope.pagemenu);
    console.log($scope.menu);
  }

  $scope.submit = function() {
    console.log(JSON.stringify($scope.menu));
    console.log($scope.menu);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<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>

AngularJS ng-repeat Post Value没有使用id作为键进入正确的模式

1 个答案: