i able purely implement grid json object - angularjs ng-repeat populate grid array. however, due nature of added indices, being able create search bar ng-model , filter:search not work - can search first in each table row.
var test= angular.module("app", []); test.controller("appcontrol", function($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function (response) { $scope.data = response.records; } ); $scope.getfiltered= function(obj, idx){ //set property on item being repeated actual index //return true every 1st item in 5 items return !((obj._index = idx) % 5); } });<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <body ng-app='app' ng-controller='appcontrol'> <input type='text' ng-model='search.country' /> <table> <tr ng-repeat="work in data | filter:getfiltered | filter:search"> <td>{{work.country}}</td> <td>{{data[work._index+1].country}}</td> <td>{{data[work._index+2].country}}</td> <td>{{data[work._index+3].country}}</td> <td>{{data[work._index+4].country}}</td> </tr> </table> </body>the length of data may or not cause table perfect rectangle.
i'm working on making function split array , create grid in javascript itself, i'm still not sure how filter via search input.
second try (with mentioned function, no filters @ yet...):
var test= angular.module("app", []); function creategrid(arr, width) { newarr = []; reps = math.ceil(arr.length/width) * width; k = 0; (var = 0; < reps/width; i++) { newarr[i] = []; } (var = 0; < reps/width; i++) { (var j = 0; j < width; j++) { (arr[k]) ? newarr[i][j] = arr[k] : newarr[i][j] = ""; //console.log(i, j, arr[k]); k++; } } return newarr; } test.controller("appcontrol", function($scope, $http) { $scope.gridwidth = 4; $http.get("http://www.w3schools.com/angular/customers.php") .success(function (response) { $scope.data = creategrid(object.keys(response.records).map(function(k) { return response.records[k] }), $scope.gridwidth); } ); });<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <body ng-app='app' ng-controller='appcontrol'> <input type='text' ng-model='search.country' /> <table> <tr ng-repeat="row in data"> <td ng-repeat='work in row'> {{ work.country }} </td> </tr> </table> </body>
you try this:
var test= angular.module("app", []); test.controller("appcontrol", function($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function (response) { $scope.data = response.records; $scope.filtereddata= response.records; } ); $scope.$watch('search', function () { var array=[]; for(var in $scope.data) { if($scope.search==undefined || $scope.search.length == 0 || ($scope.data[i].country!=undefined&&$scope.data[i].country.touppercase().startswith($scope.search.touppercase()))){ array.push($scope.data[i]); } } $scope.filtereddata=array; }); $scope.getfiltered= function(obj, idx){ //set property on item being repeated actual index //return true every 1st item in 3 items return !((obj._index = idx) % 5); } });<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <body ng-app='app' ng-controller='appcontrol'> <input type='text' ng-model='search' /> <table> <tr ng-repeat="work in filtereddata | filter:getfiltered | filter:search"> <td>{{work.country}}</td> <td ng-show="filtereddata[work._index+1]">{{filtereddata[work._index+1].country}}</td> <td ng-show="filtereddata[work._index+2]">{{filtereddata[work._index+2].country}}</td> <td ng-show="filtereddata[work._index+3]">{{filtereddata[work._index+3].country}}</td> <td ng-show="filtereddata[work._index+4]">{{filtereddata[work._index+4].country}}</td> </tr> </table> </body>