Question

我正在尝试使用Angulars group-by语法来创建形式
数据的下拉列表
[{name：'xyz'，subitems：[{} ... N]} ... N] （见下文）

http://plnkr.co/edit/Rthy3Bje7ISYVOSwzIZZ?p=preview

似乎group-by不支持这种结构，因此我在optgroup元素上使用ng-repeat。这使我处于必须将所选项目视为字符串的位置，然后我必须将其解析回对象。

问题1 ：Angular的group-by语法可以在我的数据结构上运行以产生适当的optgroup吗？

如果不是那么

问题2 ：我目前使用ng-repeater而不是optgroups的实现是我必须用来解决这个问题的基本风格，还是我错过了一个更简单的解决方案？

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
  </head>

  <body ng-controller="myCtrl">

    <h3>Can select-group-by expression be used here????</h3>
    <select ng-options="obj.name for obj in data" ng-model="selectedObj">
    </select>
    {{selectedObj}}

    <h3>In lieu of repeating optgroups?</h3>
    <select ng-model="selectedModel2" ng-change="convert()">
      <optgroup ng-repeat="obj in data" label="{{obj.name}}">
        <option value="{{bsnObj}}" 
                ng-repeat="bsnObj in obj.bsnObjs">{{bsnObj.name}}</option>
      </optgroup>
    </select>
    {{selectedModel2}}

    <script>
      var app=angular.module("app",[]);
      app.controller("myCtrl",function($scope){

        $scope.convert=function(){
          $scope.selectedModel2 = JSON.parse(this.selectedModel2);
        };

        $scope.data=[
          {"name" : "forms", bsnObjs: [{name:"formA"},{name:"formB"}]},
          {"name" : "docs", bsnObjs: [{name:"docsA"},{name:"docsB"}]}
        ]
      });
      angular.bootstrap(document,["app"]);
    </script>

  </body>

</html>

Answer 1

如果你有嵌套的对象数组，如下面的json：

，请使用下面的代码来展平列表

$scope.data=[
            {"name" : "forms", bsnObjs: [{name:"formA"},{name:"formB"}]},
            {"name" : "docs", bsnObjs: [{name:"docsA"},{name:"docsB"}]}
     ];
    var options = [];
    for(indexKey1 in $scope.data) {
        for(indexKey2 in $scope.data[indexKey1].bsnObjs) {
            ($scope.data[indexKey1].bsnObjs[indexKey2]).parent_name = $scope.data[indexKey1].name;
             options.push($scope.data[indexKey1].bsnObjs[indexKey2]);
        }
    }
    $scope.data = options;
    console.log($scope.data); // your flatten list

现在使用：

 <select ng-options="obj.name group by obj.parent_name for obj in data"></select>

在一个对象数组上使用Angular的group-by表达式，每个对象都有一个嵌套数组

1 个答案: