javascript - 为什么 min 属性会导致 ngChange 被调用？

Question

我有以下输入字段:

<input type="number" 
    class="menu-control validate" 
    style="width: 50px;" 
    ng-disabled="!ctrl.editable()" 
    min="1" 
    ng-change="ctrl.updateBookingPriceRequest()" 
    ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 2000, 'blur': 0 }}" 
    ng-model="extra.quantity" />

我的问题是 min 指令。当它在那里时，angular 开始重复调用 ng-change 而输入根本没有改变(这不好，因为我正在对更改执行 ajax 调用)。如果我删除 min 它工作得很好，而且我没有与 max 相同的问题。模型最初是高于还是低于最小值似乎并不重要。

谁能看到我看不到的东西？

编辑:

我试着让我的 change 函数什么也不做，它停止了这个问题，所以这一定是我的代码造成的。但我不明白的是为什么没有 min 也能正常工作!

this.updateBookingPriceRequest = function () {
            _this.prices.getBookingPrice(_this.bookingPrice).then(function (response) {
                if (response.successful) {
                    _this.bookingPrice = response.data;
                    _this.bookingPrice.mooringExtras.bookingExtras.forEach(function (extra) {
                        var feature = _this.features.filter(function (f) { return f.featureId === extra.mooringFeatureId; })[0];
                        extra.unitOfMeasureId = feature.unitOfMeasureId;
                        extra.pricedQty = feature.pricedQuantity;
                        extra.pricingType = feature.pricingType;
                    });
                    if (_this.bookingPrice.mooringDiscounts) {
                        _this.bookingPrice.mooringDiscounts.forEach(function (discount) {
                            discount.discountName = _this.harborDiscounts.filter(function (x) { return x.id === discount.discountModelId; })[0].name;
                        });
                    }
                }
                else
                    _this.Error.showErrorMessage('Error getting booking price: ' + response.message);
            });
        };

模型作为属性的“额外”对象在函数中发生了变化，但“数量”属性保持不变。这会导致 ng-change 被触发吗？

编辑以显示如何定义对象(请参阅 valepu 的评论):

额外的对象在一个数组中(我的输入字段在一个转发器中，但在我当前的测试中数组中只有一个对象)，它是在一个名为 mooringExtras 的属性上定义的，而该属性又是bookingPrice 对象的属性，在调用 ng-change 时通过 http 请求更新(参见代码)。我知道它变得复杂，我很抱歉不知道如何更好地简化它。

额外的对象包含许多属性，其中“数量”是一个数字，是输入的模型。

这是额外对象的 JSON:

{"id":401,"bookableFeatureId":13,"mooringFeatureId":4,"featureName":"Wi-fi","bookingId":1104,"booked":true,"price":100.00,"totalAmount":300.00,"days":8,"quantity":3,"currencyUnit":"SEK","created":1460542055177}

每次调用 ng-change 时，bookingPrice 对象都会更改，但是 extra.quantity 的值保持不变。

Answer 1

我刚刚意识到在您的 onChange 函数中您这样做:

_this.bookingPrice = response.data;

根据您在问题中所写的内容，这是包含您迭代以创建输入的数组的对象。

当您完全替换对象时，ng-repeat 将从头开始创建输入。当您在输入中设置了 min 时，如果起始输入无效，这将在输入创建时触发 ng-change (angular 将设置 ng-model 在这种情况下为未定义)，这将更改整个数组，这将再次触发 ng-repeat，重新创建具有 min 属性的输入，这将触发 ng-change 再次等等...

通常 ng-repeat 会生成一个对象的散列来跟踪它正在迭代的数据的变化，如果你完全替换它那么它会认为你删除了旧对象并放入了一个新对象(即使它们具有相同的数据)，通过使用 track by extra.id 将告诉 ng-repeat 即使您替换了对象，它们实际上并没有改变(它们仍然具有相同的 .id)并且不会重新创建从头开始创建对象，但是，这是一个修复，但只替换当前数组的值可能是一个好习惯。

我已经成功地在这个 plunkr 中重现了你的问题:http://plnkr.co/edit/XyEyGTvuYKyz1GGmWjuP?p=preview

如果删除该行:

ctrl.objects = [{quantity: 0, price: 0, booked: true}, {quantity: 0, price: 0, booked: true}];

它会再次工作