角度：フィールドの変更に関するウォッチコレクションと計算を行います

私はAngularで単純なページを作成しています。そこに作成する必要があるウォッチャーにはいくつか問題があります。まず第一に私のコレクションは、このようなものになります。角度：フィールドの変更に関するウォッチコレクションと計算を行います

$scope.products = [ 
    { 
    "name": "Milk", 
    "price": 2, 
    "currency": "USD", 
    "exchangeRate": 1.5, 
    "localCurrencyPrice": 0 
    }, 
    { 
    "name": "Bread", 
    "price": 1, 
    "currency": "EUR", 
    "exchangeRate": 1, 
    "localCurrencyPrice": 0 
    }, 
    { 
    "name": "Skittles", 
    "price": 3, 
    "currency": "GBP", 
    "exchangeRate": 2, 
    "localCurrencyPrice": 0 
    }, 
    { 
    "name": "Nesquik", 
    "price": 10, 
    "currency": "CHF", 
    "exchangeRate": 2.5, 
    "localCurrencyPrice": 0 
    } 
]

私はそれぞれのフィールドと、コレクション内のオブジェクトのすべてのプロパティを示すことになるが、このような何かを見るために起こっている：https://plnkr.co/edit/hnuC1IAMZAQznDYP6tsQ?p=preview

として、私は項目を追加または削除できるので、配列の長さは起動時に定数ではないことがわかります。私はそれぞれの項目に "PRICE"と "EXCHANGERATE"フィールドのウォッチャーを作成したいと思います。ユーザーがその値を変更すると、それらは両方とも計算され、結果は "LOCALCURRENCYPRICE "フィールド。 /例えば。私は1.7に価格を変更する場合、最初の項目に「ミルク」、それは1.5のEXCHANGERATEでmupliedしなければならないと結果がlocalCurrencyPriceモデルとフィールド/に移入する必要があります。新しい商品を商品配列に追加するときは、その商品のウォッチャー「価格」と「exchangeRate」を追加する必要があります。

どのようにこれを行うことができますか？ありがとう！

出典

2017-06-09 yep4u

はあなたのテンプレートの初期化のために（https://docs.angularjs.org/api/ng/directive/ngChange）

でNG-変更機能を定義する必要があります。

<div class="field" ng-repeat="(fieldKey, fieldValue) in item"> 
    <div ng-init="calcFunc(item)">{{ fieldKey.toUpperCase() }}: 
    <input type="text" name="item.name" ng-model="fieldValue" ng-change="myFunc(fieldKey, fieldValue,item)/> </div> 
    </div>

は、あなたのロジックを使用して、コントローラにそれを追加します：

$scope.calcFunc = function(item) { 
    item['LOCALCURRENCYPRICE'] = item['EXCHANGERATE'] * item['PRICE']; 
} 

$scope.myFunc = function(key,val,item){ 
     if(key === 'EXCHANGERATE') .... // check if the updated field is one of your's requested 
     { 
     //edit item['LOCALCURRENCYPRICE'] 
     $scope.calcFunc(item); 

     } 

}

出典

2017-06-09 12:23:36 aorfevre

私は 'ng-change'を使うことを考えていましたが、リストの実際の初期化に問題があると思っていました。なぜなら、それは解雇されないからです。何らかの理由でアイテムオブジェクト全体を変更しても、それは実行されません。ユーザーが入力と反復するときにのみng-changeが起動されるのは間違っていますか？ – yep4u

あなたは初期化のためにng-initを持つことができます。私はそのために私のコードを更新します。 – aorfevre

'ng-init'は良い解決策です。ありがとうございます。それを試して、それが期待どおりに動作するかどうかを確認します:) – yep4u

私は別の方法で、その中でそれを試してみましたあなたがそれを呼び出す（https://docs.angularjs.org/api/ng/directive/ngInit）

NG-のinitを使用することができますあなたがそれを好きなよう：私はやった

：

1. ng-modelをprice、exchangate、localcurrencyrateに追加しました。 localcurrencyrateのNG-モデルで

2.次は、私はそれが

はちょうどあなたが正確ワットあなたが必要となりますコードの下にペーストをコピーし、それをテスト

価格とexchangerate.thatsを掛け:)

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in products"> <td>  <br>  <b>Item  {{$index}}</b> <button ng-click="RemoveItem()">Remove Item</button><br><br> NAME:<input type="text" value="{{x.name}}" /><br> PRICE:<input type="text" value="{{x.price}}" ng-model="x.price"/><br> CURRENCY:<input type="text" value="{{x.currency}}"/><br> EXCHANGERATE:<input type="text" value="{{x.exchangeRate}}" ng-model="x.exchangeRate"/><br> LOCALCURRENCYPRICE:<input type="text" value="{{x.localCurrencyPrice}}" ng-model="x.price*x.exchangeRate"/><br> <br> </td> </tr> </table> <button ng-click="AddNewItem()">Add New Item</button> <br> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope) { $scope.AddNewItem = function() { $scope.products.push({ name: "", price: 0, currency: "", exchangeRate: 0, localCurrencyPrice: 0 }); }; $scope.RemoveItem = function() { $scope.products.splice(this.$index, 1); }; $scope.products = [ { "name": "Milk", "price": 2, "currency": "USD", "exchangeRate": 1.5, "localCurrencyPrice": 0 }, { "name": "Bread", "price": 1, "currency": "EUR", "exchangeRate": 1, "localCurrencyPrice": 0 }, { "name": "Skittles", "price": 3, "currency": "GBP", "exchangeRate": 2, "localCurrencyPrice": 0 }, { "name": "Nesquik", "price": 10, "currency": "CHF", "exchangeRate": 2.5, "localCurrencyPrice": 0 } ] }); </script> </body> </html>

出典

2017-06-09 13:55:12

あなたの時間の男性のためにありがとう。しかし、これはページの初期化時にのみ機能しているようです。** PRICE **または** EXCHANGERATE **の値を変更すると、再度計算されません。また、スコープモデルに保存されていないので、後で必要になります。 – yep4u

角度：フィールドの変更に関するウォッチコレクションと計算を行います

答えて

関連する問題