current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I am new to angular, and trying to build an app in ionic. I have 2 fields on screen, and I want to implement the following.

  1. when user enters something in the price field, I want to update weight field accordingly.
  2. when user enters something in the weight field, I want to update the price field.

Here is my code.

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

and in my controller I have 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;

}

when I change one field the other one doesn't get updated. The functions are getting called, I have made sure of that by adding an alert to them.

Any help will be much appreciated.

share|improve this question
    
Its seems to be working fine for me, can you post your whole code. Its most probably a typo. See this link – Manish Singh 19 hours ago
up vote 0 down vote

Create a json object instead of using directly scope variable.

Use this below code.

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;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.