[英]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
)-因此對於以下內容,我將假設數據來自異步來源。
下面試圖展示其中的一些想法:
<!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.