Угловая инертная проблема с привязкой данных

Question

Я новичок в Angular и пытаюсь создать приложение в ионной форме. У меня есть 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; 

} 

Когда я изменяю одно поле другой не обновляется. Функции вызываются, я убедился в этом, добавив к ним 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; 
}