Question

我有一组数字，例如：

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>

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

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

Answer 1

在这种情况下，你的意思并不完全清楚“角度方式” - 尤其是从一维方法创建一个二维数组似乎不是一个角度问题。

此外，不清楚为什么以及以何种方式提供菜单的数据是动态的（特别是因为您的示例只是从ng-init抓取它） - 所以对于以下我将假设数据来自异步源。

通常，异步源包含在Angular服务中。转换数据所需的任何逻辑通常都是服务的一部分，而不是控制器 - 除非转换高度特定于该控制器，并且服务使用备用数据表示为应用程序的其他部分提供服务。
你应该考虑使用一个拥有自己的模板和控制器的指令来“组件化”你的菜单。
仅在必要时才使用$ scope。在Angular JS 1.1.5中引入了“Controller As”语法，从那时起，支持一直在稳步提升。

以下尝试展示其中一些想法：

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

为网格创建二维数组

1 个答案: