使用重复的 javascript 变量

Question

所以在我的页面上，我的数据输出为：

   var firststep = 1;
   var secondstep = 2;
   var thirdstep = 3;
   var fourstep = 4;

   var firststep = 1;
   var secondstep = 2;
   var thirdstep = 3;
   var fourstep = 4;

这些值实际上是由服务器输出的，但是我需要独立地重用这些值。我可以传递一个附加值，例如：

   var category = flight;

但其余值如上。

例如，我尝试使用多个滑块，但两个滑块都使用最后一个 JS 变量，我通过以下方式传递它们：

  $scope.first[1]=firststep;
  $scope.first[2]=secondstep;
  $scope.first[3]=thirdstep;
  $scope.first[4]=fourstep;

但是不知道如何处理使用相同变量的多种情况。

Answer 1

如果您使用多个具有相同变量名称的滑块，那么您应该将这些变量包装到一个对象/模型中。

例如在控制器的范围内

$scope.default_values = {
    firststep: 1,
    secondstep: 2,
    thirdstep: 3,
    fourthstep: 4,
};
$scope.slider_1_values = angular.copy($scope.default_values);
$scope.slider_2_values = angular.copy($scope.default_values);

然后在您的视图/控制器中使用适当的 slider_1_values 或 slider_2_values 对象。您可以使用 ng-model="slider_1_values" 使输入使用特定对象作为其模型。

---

我认为在您的情况下最好的选择是将滑块变成“指令” 因此，您可以通过为其分配不同的模型来重复使用具有不同变量的滑块。

<custom-slider ng-model="slider_1_values"></custom-slider>
<custom-slider ng-model="slider_2_values"></custom-slider>

app.directive('customSlider', function() {
    return {
        "restrict": "E",
        "templateUrl": "yourslider_theme.html",
        "controller": function($scope) {
            //depending on the ng-model="" your 
            $scope.values now contain a different set of same variables
        },
        "link": function($scope, $element, $attr) {
            $scope.values = $scope[$attr['ngModel']];
        }
    };
});