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

我需要一个完整的脚本，但我需要其中两个滑块。我怎么能这样做？

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

请参阅下文。

＆＃13;

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

＆＃13;

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

＆＃13;

如何在页面中两次执行Angular的输出

2 个答案: