在单个页面上制作一个应用程序的多个不同副本（AngularJS）

Question

我有一个简单的应用程序，它从数组中逐一列出“汽车”。当用户单击按钮时，将显示数组中的下一辆车。

控制器：

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

“视图”：

    <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>

如何以这种方式在单个页面上显示多个不同的汽车阵列，每个阵列都有自己的控件（在这种情况下，唯一的控件是“魔术”按钮）？

UPD：当然，我可以创建一个所需的 ng-apps，每个都有自己的控制器副本（“parkingCtrl1”、“parkingCtrl2”...“parkingCtrl10”）。但我想这不是最好的方法:)

Answer 1

好的，所以我会为此构建指令：

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

控制器：

(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'}
        ];

    }

})();

然后在你的 html 文件中放这个指令：

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

因为它是一个指令，你可以多次重复使用它，例如：

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

Answer 2

您可以创建一个“滑块”数组：

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

查看

<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>