一格創建一個二維數組

var data=['1','4','2','1','6','9','1','5',]

，我想將其轉換成二維數組，像下面這樣：

result = [['1','4','2','1'],['6','9','1','5']]

我的目標是使動態網格風格的菜單系統，離子從下面的例子中

<div class="text-center" ng-init="models = [['12','1','2','3','3'],['4','4','5','6','7']]"> 
    <div ng-repeat="m in models"> 
     <span class="control-label1" ng-repeat="movie in m track by $index"> 
    {{movie}}</span> 
    </div> 
</div>

爲了做到這一點，我需要在2維數組中添加我所有的值。我在給定函數如下

//this function make populate my array with unique value 
    $scope.addhourinArray = function (value) { 

     if (value) { 
      if ($scope.hourArray.indexOf(value) == -1) { 
       $scope.hourArray.push(value); 
      } 
     } 
    }; 


    for (var i = 0; i < data.length; i++) { 
     $scope.addhourinArray(hour); 
    }

來源

2016-04-03 nur farazi

[將JS數組分割爲N個數組]（http://stackoverflow.com/questions/8188548/splitting-a-js-array-into-n-arrays） – adeneo

使用lodash _.chunk – Ved

增值這不完全清楚你在這方面的「角之路」的意思是 - 特別是作爲一個2維數組從1維的創作不似乎是一個角度問題。

此外，目前還不清楚爲什麼菜單中的數據是動態的（特別是當您的示例只是從ng-init中抓取它時） - 因此，下面我將假設數據來源於一個異步源。

典型的異步源包裝在Angular服務中。轉換數據所需的任何邏輯通常都是服務的一部分，而不是控制器 - 除非轉換對控制器具有高度特定性，並且該服務以替代數據表示形式爲應用程序的其他部分提供服務。
您應該考慮使用一個包含自己的模板和控制器的指令「組件化」菜單。
只有當你絕對必須使用$ scope。「Angular JS 1.1.5」引入了「Controller As」語法，從那以後，支持一直在穩步提高。

下試圖證明一些想法：
Chapter 1: Building a simple element directive - JSFiddle
How I've Improved My Angular Apps by Banning ng-controller
Refactoring Angular Apps to Component Style
AngularJS: Developer Guide: Dependency Injection - $inject Property Annotation
AngularJS: API: $q - $q constructor
：

<!DOCTYPE html> 
<html> 
<head> 
    <title>angular 1.x directive for movie-menu custom element</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
</head> 
<body> 
    <div ng-app="myApp"> 
    <!-- register 'movie-menu.html' with $templateCache --> 
    <script type="text/ng-template" id="movie-menu.html"> 
     <div ng-repeat="m in mmvm.models"> 
     <span ng-repeat="movie in m track by $index"> 
      {{movie}} 
     </span> 
     </div> 
    </script> 

    <!-- movie-menu custom element --> 
    <movie-menu></movie-menu> 
    </div> 
    <script type="text/javascript"> 
    (function() { 

     // using $q (instead of $http) to fake async call returning promise 
     dataServiceFactory.$inject = ['$q']; 
     function dataServiceFactory ($q) { 

     function transformData (items) { 
      var rowLength = ((items.length % 2) == 0 ? items.length : items.length - 1)/2, 
      top = items.slice(0, rowLength), 
      bottom = items.slice(rowLength, rowLength + rowLength); 

      return [top, bottom]; 
     } 

     function fakeData() {  
      var data, transformed, resultP, resolveResult, rejectResult; 

      // FAKING IT- static data 
      data = ['12','1','2','3','3','4','4','5','6','7','x']; 

      // transform data 
      transformed = transformData(data); 

      // FAKING IT- wrap result in a promise 
      // This service would chain a promise off 
      // of the promise from the async call 
      resultP = $q(function(resolve, reject) { 
      resolveResult = resolve; 
      rejectResult = reject;   
      }); 

      // FAKING IT - resolve promise immediately 
      resolveResult(transformed); 

      return resultP; // promise to deliver cleaved data 
     } 

     return { 
      getData: fakeData 
     }; // return the dataService instance 

     } // end dataServiceFactory 

     MovieMenuCtrl.$inject = ['dataService']; 
     function MovieMenuCtrl (dataService) { 
     var vm; 

     function setModels (result) { 
      vm.models = result; 
     } 

     vm = this; 
     dataService.getData().then(setModels);  
     } 

     // A directive definition object (Ddo) factory 
     movieMenuDdoFactory.$inject = []; 
     function movieMenuDdoFactory() { 
     // return the directive definition object 
     return { 
      restrict: 'E', 
      scope: {}, // isolate scope for the controllerAs reference to exist in without danger of collision 
      replace: true, 
      templateUrl: 'movie-menu.html', 
      controller: 'MovieMenuCtrl', 
      controllerAs: 'mmvm', 
      bindToController: true 
     }; 
     } 

     angular 
     .module('myApp', []) 
     .factory('dataService', dataServiceFactory) 
     .controller('MovieMenuCtrl', MovieMenuCtrl) 
     .directive('movieMenu', movieMenuDdoFactory); 

    })(); 
    </script>  
</body> 
</html>

有些靈感來自哪裏

來源

2016-04-03 22:58:28

一格創建一個二維數組

回答

相關問題