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? http://stackoverflow.com/questions/10816073/how-to-do-paging-in-angularjs — ssuperczynski, Dec 05 '15 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, Dec 05 '15 at 20:01

ssuperczynski · Accepted Answer · 2015-12-05T20:14:13.997

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>

score 1 · Answer 2 · answered Dec 05 '15 at 20:13

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>

Infaustus's answer is way better – Mario Lamacchia Dec 05 '15 at 20:14 — Mario Lamacchia, Dec 05 '15 at 20:14

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

2 Answers2