Angular.js - 通过嵌套属性过滤对象

Question

我正在寻求建议。我的以下代码不起作用，很可能是因为$scope.clients 对象更改时未更新的指令或过滤器：

$scope.clients = {
    "IDa": {"position": {index: 1}, "name": "a"},
    "IDb": {"position": {index: 2}, "name": "b"},
    "IDc": {"position": {index: 3}, "name": 'c'},
    "IDd": {"position": {index: 4}, "name": "d"},
    "IDe": {"position": {index: 5}, "name": "e"},
    "IDf": {"position": {index: 6}, "name": "f"},
    "IDg": {"position": {index: 7}, "name": "g"},
    "IDh": {"position": {index: 8}, "name": "h"},
    "IDi": {"position": {index: 9}, "name": "i"}
};

我需要根据 position 属性显示 7 个项目（div）。棘手的是，如果对象中的项目少于 7 个，则视图必须仍然有 7 个项目，而不是 name 属性，它会说“等待客户端”。视图必须按照位置 1..7 的顺序显示这 7 个项目。

HTML：

<div class="streams__unit" stream client="clients | position:1">
       {{ client.name || 'Waiting for client' }}
</div>
<div class="streams__unit" stream client="clients | position:2">
       {{ client.name || 'Waiting for client' }}
</div>
<div class="streams__unit" stream client="clients | position:3">
       {{ client.name || 'Waiting for client' }}
</div>
<div class="streams__unit" stream client="clients | position:4">
       {{ client.name || 'Waiting for client' }}
</div>
<div class="streams__unit" stream client="clients | position:5">
       {{ client.name || 'Waiting for client' }}
</div>
<div class="streams__unit" stream client="clients | position:6">
       {{ client.name || 'Waiting for client' }}
</div>
<div class="streams__unit" stream client="clients | position:7">
       {{ client.name || 'Waiting for client' }}
</div>

这是位置过滤器：

angular.module('app').filter('position', function () {
    return function (clients, index) {
        var client = {};

        for(var i in clients) {
            if(clients[i].position.index === index) {
                client = value;
                break;
            }
        };

        return client;
    }
});

但它不起作用，因为客户端对象更新晚于过滤器触发（我认为）。这是指令：

angular.module('app').directive('stream', function () {
    return {
        restrict: 'EA',
        controller: function($scope) {
            $scope.$watch('client', function(val) {
                console.log('watch worked', val);
            });
        },
        scope: {},
        link: function (scope, element, attrs, fn) {
            scope.$watch(attrs.client, function(client) {
                scope.client = client;
            });
        }
    };
});

Answer 1

一种方法是两步法：

1. 将对象预处理为所需的数组。
2. 使用 ng-repeat 并应用“orderBy”过滤器和“limitTo”过滤器。

这是一个笨拙的例子： http://plnkr.co/edit/AYEvW9DmxdZEF9lVSD20?p=preview

HTML：

<div ng-repeat="item in clientsArr | orderBy: 'position.index' | limitTo: 7" class="streams__unit">
   {{ item.name || 'Waiting for client' }}
</div>

JavaScript：

angular.module('app', []).controller('ExampleCtrl', function($scope) {

$scope.clients = {
  "IDa": {"position": {index: 1}, "name": "a"},
  "IDb": {"position": {index: 2}, "name": "b"},
  "IDc": {"position": {index: 3}, "name": 'c'},
  "IDd": {"position": {index: 4}, "name": "d"},
  "IDe": {"position": {index: 5}, "name": "e"}
};

$scope.clientsArr = [];
for(var i in $scope.clients) {
  $scope.clientsArr.push({
      id: i,
      position: $scope.clients[i].position,
      name: $scope.clients[i].name
    });
  }

  while($scope.clientsArr.length < 7) {
    $scope.clientsArr.push({});
  }
});