如何在一个页面中进行两次 Angular 的输出

Question

http://jsfiddle.net/pbyhz24k/

var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
function TestController() {
    var vm = this;
    vm.priceSlider = {
        value: 200,
        options: {
            floor: 0,
            ceil: 500
        }
    }
}

我完全需要一个脚本，但是我需要其中2个滑块。我该怎么做？

Answer 1

您可以创建一个数据数组

vm.sliders = [
   {
      value: 200,
      options: {
         floor: 0,
         ceil: 500
      }
   },
   {
      value: 200,
      options: {
         floor: 0,
         ceil: 500
      }
   },
   {
      value: 200,
      options: {
         floor: 0,
         ceil: 500
      }
   }
]

并在模板中使用ng-repeat

<rzslider ng-repeat="slide in vm.sliders" rz-slider-model="slide.value" rz-slider-options="slide.options"></rzslider>

我没有测试这个，我不再喜欢Angular 1，但是方法是。

Answer 2

请参见下文。

var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
function TestController() {
    var vm = this;
    vm.priceSlider = {
        value: 200,
        options: {
            floor: 0,
            ceil: 500
        }
    }
    vm.priceSliderAnother = {
        value: 200,
        options: {
            floor: 0,
            ceil: 500
        }
    }
}

<div ng-app="myapp">
    <div ng-controller="TestController as vm">
        <p>Price: {{vm.priceSlider.value}}</p>
        <rzslider rz-slider-model="vm.priceSlider.value" rz-slider-options="vm.priceSlider.options"></rzslider>
        <p>Price: {{vm.priceSliderAnother.value}}</p>
        <rzslider rz-slider-model="vm.priceSliderAnother.value" rz-slider-options="vm.priceSliderAnother.options"></rzslider>
    </div>
</div>