角度離子數據綁定問題

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