Question

我有一个数据项的地图我正在一个表中显示，该表在控制器中用新值刷新（因此按键跟踪）。一切正常。

如果我尝试将角度滤镜投射到混音中，它会忽略滤镜并显示所有数据。

（顺便说一句，数据中的项目正来自来自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是一个唯一标识数据映射中项目的属性。

Answer 1

由于您的输入模型设置为search，因此您按search.id而不是search.id进行过滤。试试这个：

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

Answer 2

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

从此回答here中窃取地图过滤器，现在一切正常。

plunker http://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)];
}

ngRepeat中对象属性的角度过滤器似乎不适用于'track by'

2 个答案: