角离子数据绑定问题

Question

我是Angular的新手，并试图用ionic构建一个应用程序。我在屏幕上有 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;
}