在一个页面上制作一个应用的几个不同副本 (AngularJS)

22 浏览
0 Comments

在一个页面上制作一个应用的几个不同副本 (AngularJS)

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

控制器：

  var parking = angular.module("parking", []);
  // 将parkingCtrl注册到parking模块
  parking.controller("parkingCtrl", function ($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;
    }
  });

视图：

    
      
      {{car.plate}}

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

更新：当然，我可以创建所需数量的ng-app，每个都有其自己的控制器副本（“parkingCtrl1”，“parkingCtrl2”...“parkingCtrl10”）。但我觉得这不是最好的方法 🙂

0

2 答案

0 Comments

问题：如何在一个页面上创建多个相同的应用程序副本？

原因：为了实现在一个页面上创建多个相同的应用程序副本，需要使用AngularJS的directive指令来定义一个自定义元素（cars），然后在HTML文件中使用这个指令来重复使用该应用程序副本。

解决方法：首先，在AngularJS的module中定义一个directive（cars），该directive的restrict属性设置为'E'，表示使用自定义元素。然后，在directive的controller中定义一个next函数。最后，在directive的template中使用ng-repeat指令来遍历传入的dataset数组，并显示car的plate属性以及一个next按钮。

接下来，在AngularJS的module中定义一个controller（carsCtrl），并在该controller中定义多个与dataset对应的数组（yourCarArray、yourCarArray2、yourCarArray3、yourCarArray4、yourCarArray5）。

最后，在HTML文件中使用directive指令（）来创建多个相同的应用程序副本，可以通过多次使用directive指令并传入不同的dataset数组来实现。

0
0 Comments

使用AngularJS在单个页面上创建一个应用的多个副本的问题出现的原因是需要在页面上显示多个相同的应用，每个应用都有自己的数据和状态。

解决方法是使用一个数组来存储每个应用的数据和状态。在控制器中，创建一个空数组"sliders"，并为每个应用创建一个对象，包含一个索引和一个车辆数组。然后，将每个对象添加到"sliders"数组中。在视图中，使用ng-repeat指令在页面上循环显示每个应用的内容。当点击"next"按钮时，调用控制器中的next函数，根据当前应用的索引，将索引加1并取模车辆数组的长度，以实现循环显示车辆的功能。

以下是完整的代码：

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: cars1});
  sliders.push({index: 0, cars: cars2});
  $scope.sliders = sliders;
  $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" >
    <!-- 显示车牌号 -->
    <td>{{car.plate}}</td>
  </tr>
  <button ng-click="next($index)">下一个</button>
</div>

通过以上的代码，我们可以在一个页面上创建多个副本的应用，每个应用都有自己的数据和状态，并且可以通过点击"next"按钮来循环显示每个应用中的车辆信息。

0