Вызывает изменение ng, когда ng-модель обновляется программно внутри ng-repeat - PullRequest
Новая
       68

Вызывает изменение ng, когда ng-модель обновляется программно внутри ng-repeat

1 голос
/ 09 октября 2019

Я прочитал темы, связанные с этим, и нашел следующее, но все еще застрял.

Как $ посмотреть изменения на моделях, созданных с помощью ng-repeat?

Я пытаюсь реализовать плюс, минус счетчик с помощью следующего кода. Теперь всякий раз, когда ng-модель обновляется нажатием кнопки +/-, я хочу запустить ng-change. Я понимаю, что ng-change не запускается, когда ng-модель обновляется программно. Но у обновленного Stackoverflow есть решение для того, чтобы добавить $ watch на модель ng. Но это работает, если я создаю отдельный контроллер, не работающий внутри текущего контроллера. 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 вызывает разные функции внутри текущего контроллера. Если поставить отдельный контроллер, то при нажатии кнопки +/- срабатывает следующая функция. Но я хочу вызвать функцию внутри ng-change 

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

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Код должен избегать использования атрибута 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);
};

Размещение сложных выражений в контроллере облегчает понимание, отладку, тестирование и обслуживание кода.

0 голосов
/ 09 октября 2019

Вы можете попробовать переместить этот код 'Count = Count + s.increment' для события ng-click в функцию в файле JS, и в этой функции вы можете вызвать ct.function2 ().

например: - 

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

и вызовите этот метод по щелчку мышью 

    ng-click="ct.Counter()"

Аналогичным образом вы можете реализовать сценарий минус.

...