Javascript 为栅格创建二维阵列_Javascript_Arrays_Angularjs_Ionic Framework

Javascript 为栅格创建二维阵列

javascript arrays angularjs ionic-framework

Javascript 为栅格创建二维阵列,javascript,arrays,angularjs,ionic-framework,Javascript,Arrays,Angularjs,Ionic Framework,我有一个数字数组，例如： var数据=['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']]">

我有一个数字数组，例如：

var数据=['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>


{{电影}

为了做到这一点，我需要在二维数组中添加所有值。我在下面给定的函数中添加值

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

//此函数使用唯一值填充我的数组
$scope.addhourinArray=函数（值）{
如果（值）{
if（$scope.hourArray.indexOf（value）=-1）{
$scope.hourArray.push（值）；
}
}
};
对于（变量i=0；i

在本文中，“角度方式”的含义并不明确，尤其是从一维数组创建二维数组似乎不是角度问题

此外，还不清楚为什么以及以何种方式提供菜单的数据是动态的（特别是当您的示例只是从

ng init

获取数据时）-因此，对于以下内容，我将假设数据来自异步源

通常异步源被包装在角度服务中。转换该数据所需的任何逻辑通常都是服务的一部分，而不是控制器的一部分，除非转换非常特定于该控制器，并且该服务使用替代数据表示服务于应用程序的其他部分
仅在绝对必要时使用$scope。“”语法早在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>


电影菜单自定义元素的angular 1.x指令
{{电影}
（功能（）{
//使用$q（而不是$http）伪造异步调用返回承诺
dataServiceFactory.$inject=['$q']；
函数dataServiceFactory（$q）{
功能数据（项目）{
var rowLength=（（items.length%2）==0？items.length:items.length-1）/2，
顶部=项目。切片（0，行长度），
底部=items.slice（rowLength，rowLength+rowLength）；
返回[顶部，底部]；
}
函数fakeData（）{
var数据、转换、resultP、resolveResult、rejectResult；
//伪造它-静态数据
数据=['12'，'1'，'2'，'3'，'3'，'4'，'5'，'6'，'7'，'x']；
//转换数据
转换=转换数据（数据）；
//假装包装会导致承诺
//这项服务会使一个承诺化为乌有
//异步调用的承诺
resultP=$q（函数（解析、拒绝）{
resolveResult=resolve；
拒绝结果=拒绝；
});
//假装-立即解决承诺
解析结果（转换）；
return resultP；//承诺交付分割的数据
}
返回{
getData:fakeData
}；//返回dataService实例
}//结束数据服务工厂
MovieMenuCtrl.$inject=['dataService']；
函数MovieMenuCtrl（数据服务）{
var-vm；
函数集模型（结果）{
vm.models=结果；
}
vm=这个；
dataService.getData（）.then（setModels）；
}
//指令定义对象（Ddo）工厂
movieMenuDdoFactory.$inject=[]；
函数movieMenuDdoFactory（）{
//返回指令定义对象
返回{
限制：'E'，
scope:{}，//隔离controllerAs引用的作用域，使其存在而不会发生冲突
替换：正确，
templateUrl:'movie menu.html'，
控制器：“MovieMenuCtrl”，
controllerAs:'mmvm'，
bindToController:true
};
}
有棱角的
.module（'myApp'，[]）
.factory（'dataService'，dataServiceFactory）
.controller（'MovieMenuCtrl'，MovieMenuCtrl）
.指令（“movieMenu”，movieMenuDdoFactory）；
})();

一些灵感来自：

使用lodash