0

我的任务：通过 JSON 文件使用 ng-repeat 制作的滑块页面。跨度显示每个滑块的值。一个输入显示(value of the slider * a grams value per selected unit).

这是我的带有多个滑块的 Plunkr，每个滑块都有 2 个食物值可供选择。

显示滑块输出的跨度应初始化为 0。我的第一个问题是，如果我在主控制器中将其初始化为 0，如上一个问题所示，那么这会更改滑块的范围，demoVals.slider以便页面上的所有滑块现在统一运行：

 //assign initial values
  $scope.demoVals = {};
  $scope.demoVals.slider = 0;

如果您注释掉这些行，现在可以再次单独操作每个滑块。

我想我可以通过为每个滑块及其输出的 ng-model 和 ng-bind 分配一个唯一标识符来解决这个问题，但是有没有更好的方法来限制范围，以便为每个 ng-repeat 单独进行初始化？

我的下一个问题是尝试对输出的值调用乘法函数：如何将所选的克单位（在模板中作为 访问{{ unit-grams }}）传递给控制器​​，并将结果作为 的值返回input？

   //calculate weight
   $scope.$watch('demoVals.slider', function (newVal) {
        if (typeof newVal !== 'undefined') {
          $scope.calculated = newVal * 3.14159; //an arbitrary number that I want to be the variable unit.grams
        } 
      });
4

1 回答 1

0

我不太确定您实际上尝试做什么来解决此问题（“通过为每个滑块及其输出的 ng-model 和 ng-bind 分配唯一标识符”是什么意思？），但是如果您想要单独每个食物滑块的值，它也应该是食物对象的一个​​元素，因为它本质上属于这个对象。

而不是使用demoVals.slider使用例如food.slider。您也可以使用 初始化它ng-init，即ng-init="food.slider=0;"

我更新了 Plunkr：http ://plnkr.co/edit/CbkSZpzoqXwcMkV1EDdp?p=preview

然而，将所有这些分离到它自己的食物控制器中似乎是个好主意。这样您就可以food在自己的范围内处理每个项目。

于 2013-11-04T12:38:32.383 回答