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指令。当它在那里时，角度开始反复调用ng-change而输入完全没有改变（因为我在更改时执行ajax调用，所以不好）。如果我删除min它工作得很好，我没有同样的问题与max。如果模型最初高于或低于最小值似乎并不重要。

任何人都可以看到我不能做的事吗？

编辑：

我尝试让我的更改功能什么也不做，它就解决了问题，所以它必须归功于我的代码。但我不明白为什么没有分钟就能正常工作！

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

我仍然不太确定为什么问题只发生在字段上的min属性上，但是通过将“track by extra.id”添加到包裹输入字段的ng-repeat，我解决了问题。我猜想当模型属性的“额外”对象发生变化时，角度会重新生成输入字段，从而触发ng-change。通过不变的id跟踪，angular不需要重新生成输入字段，因为id保持不变，因此不会触发ng-change。

我会接受这个作为我的答案，但如果有人能解释为什么它没有分钟，我会乐意接受他们的答案。

Answer 2

我刚刚意识到你在onChange函数中执行此操作：

_this.bookingPrice = response.data;

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

当您完全替换对象时，ng-repeat将从头开始创建输入。当您在输入中设置min时，如果起始输入无效，则会在输入创建时触发ng-change（在这种情况下，角度将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}];

它会再次起作用

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

2 个答案: