首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么min属性会导致调用ngChange?

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

Stack Overflow用户
提问于 2016-04-14 07:50:13
回答 2查看 85关注 0票数 1

我有以下输入字段:

代码语言:javascript
运行
复制
<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" />

我的问题是最小指令。当它在那里时,角开始重复调用ng-change,而输入根本没有改变(因为我正在对change执行ajax调用)。如果我删除min,它就能正常工作,而且我对max也没有同样的问题。最初,模型是否高于或低于min似乎并不重要。

有人能看到我看不到的东西吗?

编辑:

我试着让自己的更改函数什么也不做,它阻止了问题,所以这肯定是我的代码造成的。但我不明白的是,为什么没有min的情况下它工作得很好!

代码语言:javascript
运行
复制
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);
            });
        };

模型是属性的“额外”对象在函数中被更改,但是"quantity“属性保持不变。这会引发ng变化吗?

编辑以显示如何定义对象(请参见valepu的注释):

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

额外的对象包含许多属性,其中包含"quantity",一个number,作为输入的模型。

下面是额外对象的JSON:

代码语言:javascript
运行
复制
{"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更改时,bookingPrice对象的值都保持不变。

EN

Stack Overflow用户

回答已采纳

发布于 2016-04-14 09:25:48

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

_this.bookingPrice = response.data;

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

当您完全替换对象时,ng-repeat将从头开始创建输入。当您在输入中设置min时,这将在输入创建时触发ng-change,如果开始输入无效(在本例中,角将将ng-model设置为未定义),这将更改整个数组,这将再次触发ng-repeat,使用min属性重新创建输入,这将再次触发ng-change等等……

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

我已经在这个plunkr:http://plnkr.co/edit/XyEyGTvuYKyz1GGmWjuP?p=preview中重新创建了您的问题。

如果您移除这一行:

代码语言:javascript
运行
复制
ctrl.objects = [{quantity: 0, price: 0, booked: true}, {quantity: 0, price: 0, booked: true}];

它会再起作用的

票数 1
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36616845

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档