时间戳

首页 > 解决方案 > Angular Js orderBy with input values

angularjs - Angular Js orderBy with input values

问题描述

I'm having issues with the orderBy filter. The following code will order my initiative column just fine. When I type a value into the input, the filter automatically begins ordering the values just as I want it to.

However, if I type a value into the input that raises that character higher in the list the input will close out before I can finish typing that value.

If the value I type into the input drops the character lower down the list then that input does not close and allows me to finish typing my value.

Can anyone explain this behavior?

<tr ng-repeat="char in localChars | orderBy: '-initiative'">
    <td>{{char.name}}</td>
    <td ng-hide='show' ng-click='show = true'>{{char.initiative}}</td>
    <td ng-show='show'>
        <input ng-blur='initiative(char)' ng-model='char.initiative' type="text">
    </td>
</tr>

标签： angularjs

解决方案

以下是我认为的事件顺序：

  1. 用户在输入中输入更改 的值char.initiative。
  2. 这会导致列表通过ng-repeat.
  3. 的作用域ng-repeat被重新初始化，导致局部show变量失去它的值（记住，ng-repeat有它自己的作用域）。

要解决此问题，您需要使用ng-model-options来控制模型值实际更新的时间。您可以选择更新模糊或使用去抖动。这是更新模糊的方法（我的建议）。您可以在链接中找到有关去抖动的信息。

<input ng-blur="initiative(char)" 
       ng-model="char.initiative" 
       ng-model-options="{ updateOn: 'blur' }"
       type="text" />

推荐阅读