角度离子数据绑定问题

Question

我是Angular的新手，尝试构建离子应用程序。我在屏幕上有两个字段，我想要实现以下内容。

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对象，而不是直接使用scope变量。

使用以下代码。

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; 
}