角型イオンデータバインディングの問題

Question

私はAngularを初めて使っていて、ionicでアプリを構築しようとしています。画面に2つのフィールドがあり、次のように実装したいと思います。

1. ユーザーがpriceフィールドに何かを入力したとき、私はそれに応じてweightフィールドを更新します。
2. ユーザーがweightフィールドに何かを入力すると、priceフィールドを更新したいと思います。

ここは私のコードです。

<div class="col col-50"> 
     <div class="card"> 
      <label class="item item-input"> 
       <input ng-model="sale_item_weight" value="{{ sale_item_weight }}" ng-change="syncWithItemPrice()" type="number" placeholder="Enter Weight"> 
      </label> 
     </div> 
    </div> 
    <div class="col col-50"> 
     <div class="card"> 
      <label class="item item-input"> 
       <input ng-model="sale_item_price" value="{{ sale_item_price }}" ng-change="syncWithItemWeight()" type="number" placeholder="Enter Price"> 
      </label> 
     </div> 
    </div> 

、私のコントローラで私は、これらのメソッドがあります：

$scope.syncWithItemWeight = function() { 
    var itemPrice = $scope.sale_item_price; 
    $scope.sale_item_weight = parseInt(itemPrice) * 2; 

} 

$scope.syncWithItemPrice = function() { 
    var itemWeight = $scope.sale_item_weight; 
    $scope.sale_item_price = parseInt(itemWeight)/2; 

} 

私は1つのフィールドを変更すると、他の1は更新されませんが。関数が呼び出されると、私はalertを追加してそのことを確認しました。

Answer 1

直接スコープ変数を使用する代わりにjsonオブジェクトを作成します。

次のコードを使用してください。

HTML

<div class="col col-50"> 
    <div class="card"> 
     <label class="item item-input"> 
      <input ng-model="sale_item.sale_item_weight" value="{{ sale_item.sale_item_weight }}" ng-change="syncWithItemPrice()" type="number" placeholder="Enter Weight"> 
     </label> 
    </div> 
</div> 
<div class="col col-50"> 
    <div class="card"> 
     <label class="item item-input"> 
      <input ng-model="sale_item.sale_item_price" value="{{ sale_item.sale_item_price }}" ng-change="syncWithItemWeight()" type="number" placeholder="Enter Price"> 
     </label> 
    </div> 
</div> 

JS

$scope.sale_item = {}; 

$scope.syncWithItemWeight = function() { 
    var itemPrice = $scope.sale_item.sale_item_price; 
    $scope.sale_item.sale_item_weight = parseInt(itemPrice) * 2; 
} 

$scope.syncWithItemPrice = function() { 
    var itemWeight = $scope.sale_item.sale_item_weight; 
    $scope.sale_item.sale_item_price = parseInt(itemWeight)/2; 
}