Angular JS 过滤器 - 如果新值为空，则不更新 DOM 值答案

【问题标题】：Angular JS filter - Do not update DOM value if new value is emptyAngular JS 过滤器 - 如果新值为空，则不更新 DOM 值
【发布时间】：2015-10-08 12:15:15
【问题描述】：

我正在处理一个数据繁重的 Angular 项目，其中我有一个 ng-repeat，其中许多值每秒都会更新。如果一个值为空，它现在会更新 DOM 以显示一个空值；这是正确的行为。

需要的解决方案

我想要的是一个过滤器或表达式，当新值为空或 NULL 时，它不会更新 DOM 中的值。锁存数据，我相信他们称之为。

可能的解决方案

我用 $watch 找到了几个可能的解决方案，但我认为它们不适合 ng-repeat，或者至少效率不高： angularjs $watch old value and new value are the same

我想要实现的示例：（这不起作用）

app.filter('latchIt', function () {
  return function (valueOld, valueNew) {
    if (valueNew == '') {
      // Do not update the DOM for this value, perhaps a return of the old value
      return valueOld;
    } else {
      return valueNew;
    }
  };
});

HTML

<div class="item" ng-repeat="item in items track by item.id">
  <div class="value" ng-repeat="value in item.data">{{ value | latchIt }}</div>
</div>

提前感谢您能给我的任何帮助和建议。

【问题讨论】：

虽然有可能，但我认为过滤器不太适合这项任务。相反，请查看 ng-model 或创建自己的指令，该指令可以跟踪两个值（旧的和当前的）。
值如何更新？您是否向服务器发送 ajax 调用？
item.data 的值应该被处理以在它遇到重复结构之前比较旧值和新值。创建一个控制器或更新您的 ajax 调用来做到这一点。
我不确定过滤器是否会改变是否更新的行为
我开始明白指令是要走的路。我认为指令和 ng-repeat 会相互冲突，但这可能是我的错误假设。这些值是通过 websocket 更新的，所以我有异步调用。

标签： javascript angularjs dom filter ng-repeat

【解决方案1】：

我会为此创建一个指令：

codepen：http://codepen.io/anon/pen/EVXgjz

angular.module('app').directive('latched', [function() {
  return {
    template: '<span>{{saved}}</span>',
    link: function($scope) {
      $scope.$watch('value', function(val) {
        if (!$scope.saved) {
          $scope.saved = val || 'Not defined yet';
        }
        if (val) {
          $scope.saved = val;
        } 
      })
    },
    scope: {
      value: '='
    }
  }
}])

【讨论】：

谢谢你的例子，也许用$watch函数也不错，我试试看。
我已经开发了 Angular 2 年了，我认为手表功能无缘无故地名声不好。只需要避免使用深度观察和复杂的对象，观察数千个甚至更多的值就可以了。
很高兴听到，我已经根据你的例子让它工作了！非常感谢 :) 小的后续问题，最后的范围是什么：{ value: '='} 部分？看来我的指令在有和没有它的情况下都有效。
再想一想，我的后续问题是我自己可以找到的，因为它记录在 Angular 中。再次感谢！ docs.angularjs.org/guide/directive
Np，你可以不用它，你可以使用 Angular 1.4 中的新 bindToController，它是为了隔离，所以你的指令不会弄乱任何其他依赖于 value 的范围。跨度>

【解决方案2】：

好吧，我会说 $watch 选项足以使用它，但如果您再次使用它，您可以尝试根据控制器/指令中的业务规则组合旧集合值和新集合值，然后传递它查看。

【讨论】：