仅更新聚焦的输入视图值

Question

我有 2 个输入字段，它们使用的模型与我在 ng-repeat 列表中用作过滤器的模型相同。第一个输入在列表的顶部，第二个在底部。该列表可能很长。由于我们看到很多人滚动到列表底部，但仍然无法找到他们正在寻找的内容，因此我们也在底部添加了搜索框。现在的问题是，通过绑定，2 个输入显示相同的值，这可能会导致混淆。所以我想知道是否有任何方法可以只更新（或显示）聚焦输入的值？

我自己找不到关于这个主题的任何内容，也许这是不可能的。在这种情况下，也许你们中的任何人对这个问题都有不同的解决方案。非常感谢任何帮助。

提前致谢！

Answer 1

这可以通过以下方式完成

JS

  var app = angular.module('myApp', []);
  app.controller('ctrl', function($scope) {
    $scope.data = [1, 2, 3, 4, 5];
    $scope.$watch('topFilter', function(old, newVal) {
      $scope.filter = old;
    });
    $scope.$watch('bottomFilter', function(old, newVal) {
      $scope.filter = old;
    });

  });

HTML

  <div ng-app='myApp'>
    <div ng-controller='ctrl'>

      <span>Filter: <input type='text' ng-model='topFilter' ></span>
      <ul>
        <li ng-repeat='item in data|filter:filter'>{{item}}</li>
      </ul>
      <span>Filter: <input type='text' ng-model='bottomFilter'></span>
    </div>
  </div>

希望对您有所帮助Jsfiddle link

仅更新聚焦的输入视图值

Only update focussed inputs viewvalue

javascript

user-experience

angularjs