Question

我有一组看起来像这样的数组：

$scope.testArr = [
  {
    'ONE_MTH': [
      { 'value':'1_1', 'rolle':'one1' },
      { 'value':'2_1', 'rolle':'two1' },
      { 'value':'3_1', 'rolle':'three1'}
    ]
  },
  {
    'SIX_MTH': [
      { 'value':'1_2', 'rolle':'one2' },
      { 'value':'2_2', 'rolle':'two2' },
      { 'value':'3_2', 'rolle':'three2' } 
    ]
  },
  {
    'ONE_YEAR': [
      { 'value':'1_3', 'rolle':'one3' },
      { 'value':'2_3', 'rolle':'two3' },
      { 'value':'3_3', 'rolle':'three3' } 
    ]
  }
];

让我们说当我点击一个带有'ONE_MTH'值的标签时，我希望testArr显示'ONE_MTH'中的所有数据。我怎样才能在我的控制器中处理它？</ p>

Answer 1

一个简单的解决方案是让每个标签调用“displaySelectedArray”函数（虚构名称），并传递索引值。此函数将保存名为 selectedArray 的控制器属性，该属性将引用 testArr 中的选定键。然后 ng-repeat 将是在模板中显示所选值的合适选项。

*如果您想要一个例子 - 很乐意提供帮助。

Answer 2

这就是你需要的：

我做了一个plunkr：http://plnkr.co/edit/lx0Aq4dolh9lQVtr3Uwz?p=preview

这是代码：

控制器代码：

angular
  .module("myApp", [])
  .controller("myCtrl", myCtrl)

  myCtrl.$inject = ["$scope"];

  function myCtrl($scope){
    $scope.parentSelector = "ONE_MTH";

    $scope.testArr = [
      {
        'ONE_MTH': [
          { 'value':'1_1', 'rolle':'one1' },
          { 'value':'2_1', 'rolle':'two1' },
          { 'value':'3_1', 'rolle':'three1'}
        ]
      },
      {
        'SIX_MTH': [
          { 'value':'1_2', 'rolle':'one2' },
          { 'value':'2_2', 'rolle':'two2' },
          { 'value':'3_2', 'rolle':'three2' } 
        ]
      },
      {
        'ONE_YEAR': [
          { 'value':'1_3', 'rolle':'one3' },
          { 'value':'2_3', 'rolle':'two3' },
          { 'value':'3_3', 'rolle':'three3' } 
        ]
      }
    ];

    $scope.filterKeys = function(item){
      var result = {};
      angular.forEach(item, function(value, key) {
        angular.forEach(value, function(subValue, subKey) {
          result[subKey] = subValue;
        })
      });

      return result;
    }

    $scope.getChildren = function(key){
      if(key)
        $scope.parentSelector = key;
      var result = {};
      var flag = true;
      angular.forEach($scope.testArr, function(value, key) {
        if(flag){
          angular.forEach(value, function(subValue, subKey) {

            if(subKey == $scope.parentSelector){

              result = subValue;
              flag = false;

            }
          })
        } 
      });
      return result;
    }
  }

查看代码：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <h1>Selects</h1>
    {{parentSelector}}

    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" ng-repeat="(key, value) in filterKeys(testArr)" ng-class="{active: $index==0}">
          <a ng-href="#{{key}}" aria-controls="home" role="tab" data-toggle="tab" ng-click="getChildren(key);">
            {{key}}
          </a>
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div ng-repeat="(key, value) in filterKeys(testArr)" role="tabpanel" class="tab-pane" ng-class="{'active': $index==0}" id="{{key}}">
          <p ng-repeat="(subKey, Subvalue) in getChildren()">Value: {{Subvalue.value}} / Rolle: {{Subvalue.rolle}}</p>
        </div>
      </div>
    </div>
  </body>

</html>

Angularjs-从2维数组中获取数据

2 个答案: