Создайте двумерный массив для сетки

У меня есть массив чисел, например:Создайте двумерный массив для сетки

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) - так что для следующего я собираюсь предположить, что данные берутся из асинхронный источник.

Как правило, асинхронные источники обернуты внутри Угловой службы. Любая логика, необходимая для преобразования этих данных, обычно является частью службы, а не контроллера, если только преобразование не является очень специфичным для этого контроллера, и служба обслуживает другие части приложения с альтернативным представлением данных.
Возможно, вам стоит подумать о «компоновке» вашего меню с директивой, которая содержит свой собственный шаблон и контроллер.
Используйте только $ scope только тогда, когда вам абсолютно необходимо. Синтаксис «Controller As» был введен обратно в Angular JS 1.1.5, и с тех пор поддержка неуклонно улучшается.

следующие попытки продемонстрировать некоторые из этих идей:

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

вдохновение приходит от:
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
Array.prototype.slice() - JavaScript | MDN

источник

2016-04-03 22:58:28

Создайте двумерный массив для сетки

ответ

Смежные вопросы