Angular Ionic 数据绑定问题

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