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

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> 

我怎样才能以这种方式在单个页面上显示多个不同的汽车阵列，每个阵列都有自己的控件(在这种情况下，唯一的控件是“魔术”按钮)？

UPD:当然，我可以只创建一个必需的 ng-apps，每个都有自己的 Controller 副本(“parkingCtrl1”、“parkingCtrl2”...“parkingCtrl10”)。但我想这不是最好的方法:)

请您参考如下方法:

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

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

然后在您的 html 文件中放入此指令:

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

因为它是一个指令，所以您可以多次重复使用它，例如:

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