当 ng-model 在 ng-repeat 中以编程方式更新时触发 ng-change

Question

我阅读了与此相关的主题并找到了以下内容，但我仍然卡住了。

How to $watch changes on models created by ng-repeat?

我正在尝试使用以下代码实现加减计数器。现在，每当通过单击 +/- 按钮更新 ng-model 时，我都想触发 ng-change。我知道当 ng-model 以编程方式更新时，ng-change 不会触发。但是参考的 Whosebug 有解决方案，可以在 ng-model 上添加 $watch。但是如果我创建单独的控制器而不是在当前控制器内部工作，它就会工作。 ng-change 正在调用当前控制器内的函数。如何修复？？

<div class="input-group" ng-repeat="product in oc.itemdetail.lines">
    <input type="button" value="-" class="minus"
           ng-click="product.line.total = product.line.total - product.stepCount">

    <input  type="number"  ng-if="condition 1" ng-model="product.line.total" min="" max="" 
            step="product.stepCount" oninput="some condition"
            ng-change="oc.function1()" />
    <input  type="number"  ng-if="condition 2" ng-model="product.line.total" min="" max=""
            step="product.stepCount" oninput="some condition"
            ng-change="oc.function2()" />

    <input type="button" value="+" class="plus"
           ng-click="product.line.total = product.line.total + product.stepCount">

</div>

我上面有两个输入框，根据 ng-if 条件，一次显示其中一个。每个 ng-change 都在当前控制器中调用不同的函数。如果我放置单独的控制器，则单击 +/- 按钮将触发以下功能。但是我想在 ng-change

中调用函数

$scope.$watch('Count', function (oldValue, newValue) {
    if (newValue != oldValue)
      console.log(oldValue, newValue);
});

Answer 1

您可以尝试将有关 ng-click 事件的 'Count = Count + s.increment' 代码移动到 JS 文件中的一个函数中，然后您可以在该函数中调用 ct.function2()。

例如：-

   $ct.Counter = function(){
      Count = Count + s.increment;
       ct.function2();
   }

并在 ng-click 上调用此方法

    ng-click="ct.Counter()"

同样，您可以实现减号方案。

Answer 2

代码应避免将 onchange 属性与 ng-model 指令一起使用。 ng-if 指令使用了大量资源。如果使用它的唯一原因是切换 ng-change 功能，则应避免使用。 ng-change功能的选择可以在控制器中进行。

<div class="input-group" ng-repeat="product in oc.itemdetail.lines">
    <input type="button" value="-" class="minus"
           ng-click="oc.decrement(product)">

    <input  type="number"  ng-model="product.line.total" min="" max="" 
            step="product.stepCount" ng-change="oc.update(product)" />

    <input type="button" value="+" class="plus"
           ng-click="oc.increment(product)">

</div>

避免在模板中使用复杂的公式。而是将它们放在控制器中：

oc.update = function(product) {
   if (oc.<condition 1>) {
     oc.function1();
   };
   if (oc.<condition 2>) {
     oc.function2();
   };
};

出于性能原因，请避免使用观察器。而是使用更改模型的函数来调用更新操作：

oc.decrement = function(product) {
    product.line.total = product.line.total - product.stepCount;
    oc.update(product);
};

oc.increment = function(product) {
    product.line.total = product.line.total + product.stepCount;
    oc.update(product);
};

在控制器中放入复杂的表达式可以使代码更易于理解、调试、测试和维护。

当 ng-model 在 ng-repeat 中以编程方式更新时触发 ng-change

Fire ng-change when ng-model updated programmatically inside ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model

angularjs-ng-change