文本框上的ng-change高效/单个触发

Question

假设我在角度控制器中有以下数组：somelist = [              { name: 'John',  dirty: false },             { name: 'Max',   dirty: false },             { name: 'Betty', dirty: false }           ];我想在视图中进行ng-repeat，并为每个记录生成可编辑的字段：<div ng-repeat="i in somelist">     <input type="text" ng-model="i.name"/></div>如果有人编辑文本框（模型），我将如何有效地将字段标记为肮脏？我意识到我可以在文本字段上使用ng-change，但是，每当用户在文本框上进行单个更改（输入键）时都会触发，从而不必要地增加了调用量。是否有更有效的方法这是我想念的吗？

Answer 1

使用JavaScript ...

*已编辑：如果textareas没有其他“更改”事件要运行，则可以尝试内联onchange事件，并在运行一次后替换其值。刚刚onchange="once(this)"成为这个话题- onchange=""*在背景中。该代码仍将保留在您的HTML中。演示：

（也存在，input并且keyup在Angular中也有事件）

function once(e){

  e.style.color="red";

  e.onchange = "";

  

  //just demo... remove this.

  const d = document.getElementById('demo');

  d.innerText = Number(d.innerText) + 1;

 }

<textarea class="moo" onchange="once(this)">Change me!</textarea>

<textarea class="moo" onchange="once(this)">Me too!</textarea>

<textarea class="moo" onchange="once(this)">And me!</textarea>

<br><br>

Triggered times: <span id="demo">0</span>

一次运行eventListener函数（不是真的）：

let once = [];//creating empty array

const moo = document.getElementsByClassName('moo');//getting all textareas

for(let i = 0; i < moo.length; i++ ){//looping, to add 'change' event to each element

  once.push(1);//adding '1' to array 'i' times. Here it will look like [1,1,1];

  moo[i].addEventListener('change', function(){

    if(once[i]==0){return}//if array element equals 0 = return and don't run the function

    this.style.color = "red";

    once[i] = 0;//after triggered = making array element = 0;

    

    //just demo... remove this.

    const d = document.getElementById('demo');

    d.innerText = Number(d.innerText) + 1;

  });

}

<textarea class="moo">Change me!</textarea>

<textarea class="moo">Me too!</textarea>

<textarea class="moo">And me!</textarea>

<br><br>

Triggered times: <span id="demo">0</span>

*函数每次仍在工作...但是立即返回，这比“完整”运行更好。