簡體   English   中英

為網格創建二維數組

[英]Create a two dimensional array for a grid

我有一個數字數組,例如:

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

我想將其轉換為二維數組,如下所示:

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

我的目標是從下面的例子中制作 ionic 中的動態網格樣式菜單系統

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

在這種情況下,“角度方式”的含義並不完全清楚 - 特別是因為從一維數組創建二維數組似乎不是一個 Angular 問題。

此外,尚不清楚為什么以及以何種方式提供給菜單的數據是動態的(尤其是當您的示例只是從ng-init )-因此對於以下內容,我將假設數據來自異步來源。

  • 通常異步源包含在 Angular 服務中。 轉換該數據所需的任何邏輯通常是服務的一部分,而不是控制器 - 除非轉換非常特定於該控制器,並且該服務使用替代數據表示為應用程序的其他部分提供服務。
  • 您可能應該考慮使用包含自己的模板和控制器的指令“組件化”您的菜單。
  • 僅在絕對必要時才使用 $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>

一些靈感來自:
第 1 章:構建一個簡單的元素指令 - JSFiddle
我如何通過禁止 ng-controller 改進我的 Angular 應用程序
將 Angular 應用程序重構為組件樣式
AngularJS:開發者指南:依賴注入 - $inject 屬性注解
AngularJS:API:$q - $q 構造函數
Array.prototype.slice() - JavaScript | MDN

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM