AngularJS中的範圍和變量輸出

Question

我的任務：通過JSON文件使用ng-repeat製作的一頁滑塊。跨度顯示每個滑塊的值。顯示(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.

示出滑動件的輸出應爲0初始化我的第一個問題是，如果我在0在如在前面的問題所示的主控制器初始化它的跨度，則此改變的範圍滑塊demoVals.slider讓頁面上的所有滑塊現在工作異口同聲：

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

如果你註釋掉這些行，每個滑塊現在可以單獨再次操作。

我以爲我可以通過分配一個唯一的標識符NG-模型中的每個滑塊其輸出的& & NG綁定解決這個問題，但有沒有更好的方式來限制範圍，使初始化單獨發生的每個NG-重複？

我的下一個問題是嘗試調用輸出值的乘法函數：如何將所選克數單位（可在模板中作爲{{ 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 
     } 
     }); 

Answer 1

我不太清楚你真正想做些什麼來解決這個問題（你是什麼意思「由每個滑塊&其輸出的NG-模型& NG綁定分配一個唯一的標識符」？ ），但是如果你想爲每個食物滑塊單獨設置值，它也應該是食物的一個元素，因爲它屬於這個物體。

除了使用demoVals.slider之外， food.slider。您也可以初始化這個使用ng-init，即ng-init="food.slider=0;"

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

然而，這似乎是一個好主意，這一切都分離到了自己的食品控制器。通過這種方式，您可以在各自的範圍內處理每個food項目。