文本框上的ng-change的高效/單次觸發

Question

假設我在角度控制器中有以下數組：

somelist = [ 
             { name: 'John',  dirty: false },
             { name: 'Max',   dirty: false },
             { name: 'Betty', dirty: false }
           ];

我想在我的視圖中重復它，並為每條記錄生成可編輯的字段：

<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> 

*函數每次都在工作......但是立即返回，這比“完全”運行更好。

Answer 2

為了提高效率，通過使用::和消除雙向綁定來減少觀察者的數量，例如ng-model ：

<div ng-repeat="i in ::somelist"> <input type="text" value="{{i.name}}" ng-blur="$emit('nameChanged', i)"/> </div>

然后，在你的控制器中：

$scope.$on('nameChanged', (event, i) => updateName(i));

然后是一個快速，簡單的函數，使用i.id和i.name更新名稱和相應的ID，假設您有：

$scope.someList = [ { id: 1, name: 'John' }, { id: 2, name: 'Max' }, { id: 3, name: 'Betty }'

說明

如果不打算從列表中添加/刪除人員，則可以在someList上使用:: ，也稱為一次性綁定 ，以提高效率。 這避免了設置觀察者 。

此外，通過設置value = {{i.name}} ，您可以有效地設置從控制器到DOM 的單向綁定 ，而不是雙向綁定 ，這意味着每個循環都不會檢查輸入的值$digest周期，但對模型的任何更改都將更新DOM。

只是一個想法，隨意玩變化，例如丟棄模糊和使用單個按鈕，一次更新所有更改的字段。

你不會比那更有效率，除非你也從value="{{i.name}}"刪除觀察者，如此value="{{::i.name}}" ，然后你手動更新收到事件時的DOM。