Just starting out with Angular and experimenting with building an app in Ionic. I have a screen with 2 input fields and I want to achieve the following.
- When a user inputs something in the
pricefield, I want theweightfield to update accordingly. - Similarly, when a user inputs something in the
weightfield, I want thepricefield to update.
This is my current code setup:
<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>
Additionally, in my controller, I've defined these methods:
$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;
}
Though the functions are being called, there seems to be an issue where changing one field does not trigger updates in the other. I've confirmed this by adding alerts within the functions.