2016-07-01 7 views
0

私は単純な「アプリ」を作りたいと思っています。ユーザーが増減するときng-model="kilograms"価格の値上げ

現在の価格に「キログラム」を掛けてテーブルの値を変更したいと考えています。

product.priceをJSファイルで取得する方法がわかりません。

CodePen

+1

ここにすべての関連コードを記述してください。外部サイトにリンクしないでください。ありがとう。 – Jonast92

答えて

2

修正

1.Youはなくng-clickのものを使用して、あなたの入力の変化を追跡するためにng-changeを使用することができますを使用することができますいくつかの場所があります。

2.特定のエントリの代わりにテーブル全体を更新するため、更新機能に値を設定しないでください。つまり、すべてのエントリを更新するためにループを使用する必要があります。

$scope.updateValue = function() { 
    angular.forEach($scope.products, function(item){ 
    item.totalPrice = item.price * $scope.kilograms; 
    }); 
} 

3.Youはそう、あなたの単価のトラックを失う、あなたが他の属性にそれを保持する必要がありますあなたのpriceを更新することはできません、すなわちtotalPrice

は呼び出す必要が4.You'll更新は一度初期化中に機能するため、ロード時に空のテーブルが表示されません。

http://codepen.io/anon/pen/xOdWOB

+0

おそらく、ちょっとばかげた質問です。しかし、angularJSはどのように 'item'が配列のインデックスですか? –

+0

'item'のインデックスは何ですか?これを関数 'angular.forEach(array、function(item、index){console.log(index);}'の2番目のパラメータで得ることができます。 – Icycool

2
var app = angular.module("application", []); 

    app.controller("filterCTRL", function($scope) { 

    $scope.products = [ 
     {name:"Milk", price:100}, 
     {name:"Orange", price:120}, 
     {name:"Farina", price:50} 
    ]; 

    $scope.kilograms = 2; 

    $scope.$watch('kilograms', function(newVal, oldVal) { 
     if(newVal != oldVal) { 
     $scope.products.forEach(function(product) { 
      product.price *= newVal; 
     }); 
     } 
    }); 

    $scope.updateValue = function (product) { 
     return product.price = product.price * $scope.kilograms; 
    } 
}); 

lcyoolの答えもない仕事:)

機能をトリガします$時計とNG-の変化の両方を作成するたび要素の値が変化します。これを使用して変更を検出し、キログラムと価格の値を複数倍にして更新することができます。

1

あなたは、HTML自体にkilogramsで価格を掛けることができますし、kilogramsが変更された場合には、product.priceを変更します。

<td>{{product.price * kilograms | currency:$:0}}</td> 
関連する問題