ngRepeat中对象属性上的角度过滤器似乎不适用于"跟踪依据"

我有一个表中显示的数据项的映射，该表在控制器中用新值刷新(因此按键跟踪(。这一切都很好。

如果我试图在混合中加入一个角度过滤器，它会忽略过滤器并显示所有数据。

(顺便说一句，数据中的项目是由来自websocket的数据回调填充的——也许这是造成问题的原因(

我在这里错过了什么？

<label>Filter by Id <input ng-model="search.id"></label><br>
<table class="table table-striped">
    <tr>
        <th>Id</th>
        <th>type</th>
        <th>value</th>
        <th>time</th>
    </tr>
    <tr ng-repeat="item in data | filter:search track by item.key">
        <td>{{item.id}}</td>
        <td>{{item.type}}</td>
        <td>{{item.value}}</td>
        <td>{{item.timestamp}}</td>
    </tr>
</table>

控制器：

            DataService.addListener(listener);
            $scope.data = {};
            //incoming data from a websocket
            function listener(data) {
                    var key =  data.stuff.id1 + ':' + data.stuff.id2;
                    var lineItem = {
                        'id' : data.stuff.id1,
                        'type' : data.stuff.id2,
                        'value' : data.data.value,
                        'timestamp' : new Date(data.stuff.ts).toTimeString(),
                        'key' :key
                    };
                   $scope.$apply(function() {
                        $scope.data[key] = lineItem;
                    });
                }

请注意，item.key是一个在数据映射中唯一标识项的属性。

由于输入的模型设置为search.id，因此您按search而非search.id进行筛选。试试这个：

<tr ng-repeat="item in data | filter:search.id track by item.key">

问题是过滤器在地图上不起作用。Derp。

在这里从这个答案中偷了一个地图过滤器，现在一切都正常了。

plunkerhttp://plnkr.co/edit/u5D3tGGKDOY4P4u6T1GZ?p=preview

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="TestCtrl">
    <label>Filter by Id <input ng-model="search.id"></label><br>
    <table border="1">
        <tr>
            <th>Id</th>
            <th>value</th>
        </tr>
        <tr ng-repeat="item in data | mapFilter:search track by item.key">
            <td>{{item.id}}</td>
            <td>{{item.value}}</td>
        </tr>
    </table>
  </body>
</html>

脚本：

angular.module('app', []).controller('TestCtrl', function($scope) {
  $scope.data = {};
    for (var i = 0; i < 20; i++) {
      var item = {
        id: randomWord() + " " + randomWord(),
        key: 'key ' + i,
        value:  Math.floor(Math.random() * 300),
      };
      $scope.data[item.key] = item;
    }
})
.filter('mapFilter', function($filter) {
  var filter = $filter('filter');
  return function(map, expression, comparator) {
    if (! expression) return map;
    var result = {};
    angular.forEach(map, function(data, index) {
      if (filter([data], expression, comparator).length)
        result[index] = data;          
    });
    return result;
  }
});
var words = [
'lunville',
'pandybat',
'demurrer',
'slighter',
'reguline',
'exploder',
'krakatoa',
'wirespun',
  ];
function randomWord() {
  return words[ Math.floor(Math.random() * 8)];
}

相关内容

最新更新

热门标签：