适用范围和放大器;在AngularJS可变输出 [英] Scope & variable output in AngularJS

问题描述

我的追求：一个页面滑块，通过一个JSON文件中的NG-重复进行。跨越表示各滑块的值。显示（滑块*选择每一个单位价值克值）的输入。

这里是我的Plunkr有多个滑块，每一个选择的2个食物值。

示出滑动件的输出应为0初始化跨度我的第一个问题是，如果我在主控制器0初始化它如图一个previous问题，那么这种改变滑块的范围 demoVals.slider ，这样页面上的所有滑块现在齐声操作：

  //分配初始值
  $ scope.demoVals = {};
  $ scope.demoVals.slider = 0;
 

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

我以为我可以通过分配一个唯一的标识符NG模型和放大器解决这个问题; NG-绑定每个滑块和放大器;它的输出，但有没有更好的办法来限制范围，以使初始化是单独发生的事情对每个NG-重复？

我的下一个问题是试图调用在输出值的乘法函数：我怎么能通过选择克单元（模板访问为 {{单位克}} ）的控制器，并有返回结果为输入值？

  //重量计算
   $范围。$腕表（'demoVals.slider'，函数（的newval）{
        如果（typeof运算的newval！==未定义）{
          $ scope.calculated =的newval * 3.14159; //我想任意数量是可变unit.grams
        }
      }）;
 

解决方案

我不太清楚你真正试图这样做来解决这个（你是什么意思通过分配一个唯一的标识符NG-模型和放大器; NG-绑定每个滑块和放大器;？其输出），但如果你想为每个食品滑块独立的价值观，这也应该是食品对象的元素，因为它属于这个对象自然

而不是使用 demoVals.slider 例如使用 food.slider 。您也可以初始化这个使用 NG-INIT ，即 NG-的init =food.slider = 0;

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

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

My quest: a page of sliders, made with an ng-repeat through a JSON file. Spans showing the value of each slider. An input showing (value of the slider * a grams value per selected unit).

Here's my Plunkr with multiple sliders, each with a selection of 2 food values.

The span showing the output of the slider should initialise at 0. My first problem is, if I initialise it at 0 in the main controller as shown in a previous question, then this changes the scope of the slider demoVals.slider so that all sliders on the page now operate in unison:

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

If you comment out those lines, each slider can now be operated individually again.

I thought I could solve this by assigning a unique identifier to the ng-model & ng-bind of each slider & its output, but is there a better way to limit the scope so that the initialisation is happening individually for each ng-repeat?

My next problem is trying to call a multiplication function on the value of the output: how can I pass the grams unit selected (accessible in the template as {{ unit-grams }}) to the controller, and have the result returned as the value of the 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
        } 
      });

解决方案

I am not quite sure what you actually tried to do to solve this (what do you mean by "by assigning a unique identifier to the ng-model & ng-bind of each slider & its output"?), but if you want separate values for each food slider, it should also be an element of the food object as it belong to this object in nature.

Instead of using demoVals.slider use e.g. food.slider. You can also initialize this using ng-init, i.e. ng-init="food.slider=0;"

I updated the Plunkr: http://plnkr.co/edit/CbkSZpzoqXwcMkV1EDdp?p=preview

However, it seems like a good idea to separate all this into its own food controller. This way you could process each food item in its own scope.

这篇关于适用范围和放大器;在AngularJS可变输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！