make several different copies of one app on a single page (AngularJS)

Question

I have a simple app that lists "cars" by one from array. When user clicks button, next car from array is shown.

controller:

 var parking = angular.module("parking", []); // Registering the parkingCtrl to the parking module parking.controller("parkingCtrl", function ($scope) { // Binding the car’s array to the scope $scope.cars = [ {plate: '6MBV006'}, {plate: '5BBM299'}, {plate: '5AOJ230'} ]; $scope.idx = 0; $scope.next = function(){ $scope.idx = $scope.idx+1; if ($scope.idx>=$scope.cars.length) $scope.idx = 0; } });

"view":

 <tr ng-repeat="(i,car) in cars" ng-show="i==idx" > <!-- Showing the car’s plate --> <td>{{car.plate}}</td> </tr> <button ng-click="next()">next</button>

How can I show several different arrays of cars on a single page this way, each array with it's own controls (in this case the only control is the "magic" button)?

UPD: I could, of course, just create a required nuber of ng-apps, each with it's own copy of controller ("parkingCtrl1", "parkingCtrl2"..."parkingCtrl10"). But I guess it's not the best way :)

Are you talking about pagination? stackoverflow.com/questions/10816073/… — ssuperczynski
– ssuperczynski, Commented Dec 5, 2015 at 19:55
no. I need to create a nuber (about 5-10) of sliders on one page. Each slider contains different data and is controlled independently. — IvanSelivanov
– IvanSelivanov, Commented Dec 5, 2015 at 20:01

ssuperczynski · Accepted Answer · 2015-12-05 20:14:13Z

Ok, so I would build directive for this:

(function () { 'use strict'; /** * @ngdoc directive * @description * */ angular .module('yourModule') .directive('cars', cars); cars.$inject = ['']; function cars() { return { restrict: 'E', scope: { dataset: '=' }, controller: function ($scope) { $scope.next = function () { }; }, template: '<div>\n <tr ng-repeat="(i,car) in dataset" ng-show="i==idx" >\n <!-- Showing the car’s plate -->\n <td>{{car.plate}}</td>\n <td><button ng-click="next()">next</button></td>\n </tr>\n \n</div>' }; } }());

Controller:

(function() { 'use strict'; angular .module('yourModule') .controller('carsCtrl', carsCtrl); carsCtrl.$inject = ['$scope']; function carsCtrl($scope) { $scope.yourCarArray = [ {plate: '6MBV006'}, {plate: '5BBM299'}, {plate: '5AOJ230'} ]; $scope.yourCarArray2 = [ {plate: '6MBV006'}, {plate: '5BBM299'}, {plate: '5AOJ230'} ]; $scope.yourCarArray3 = [ {plate: '6MBV006'}, {plate: '5BBM299'}, {plate: '5AOJ230'} ]; $scope.yourCarArray4 = [ {plate: '6MBV006'}, {plate: '5BBM299'}, {plate: '5AOJ230'} ]; $scope.yourCarArray5 = [ {plate: '6MBV006'}, {plate: '5BBM299'}, {plate: '5AOJ230'} ]; } })();

And in your html file just put this directive:

<cars dataset="yourCarArray"></cars>

Because it is a directive you can reuse it many times for example:

<cars dataset="yourCarArray2"></cars> <cars dataset="yourCarArray3"></cars> <cars dataset="yourCarArray4"></cars> <cars dataset="yourCarArray5"></cars>

Mario Lamacchia · Accepted Answer · 2015-12-05 20:13:05Z

You could create an array of "sliders":

var parking = angular.module("parking", []); parking.controller("parkingCtrl", function ($scope) { var sliders = [], cars1 = [{plate: '111'}, {plate: '222'}, ...], cars2 = [{plate: '333'}, {plate: '444'}, ...]; sliders.push({index: 0, cars: car1}); sliders.push({index: 0, cars: car2}); $scope.next = function(sliderIndex){ var slider = sliders[sliderIndex]; slider.index = (slider.index + 1) % slider.cars.length; } });

view

<div class="slider" ng-repeat="slider in sliders"> <tr ng-repeat="car in slider.cars" ng-show="slider.index===$index" > <!-- Showing the car’s plate --> <td>{{car.plate}}</td> </tr> <button ng-click="next($index)">next</button> </div>

Collectives™ on Stack Overflow

make several different copies of one app on a single page (AngularJS)

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related