Angularjs Angular.js-按嵌套属性筛选对象

我在寻求建议。我的以下代码不起作用，很可能是因为指令或筛选器在

$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项，而不是名称属性，它将显示“等待客户端”。视图必须按位置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').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;
            });
        }
    };
});

---

一种方法是两步方法：

将对象预处理为所需的数组

在应用“orderBy”筛选器和“Limito”筛选器的情况下使用ng repeat

下面是一个plunker示例：

HTML:

{{item.name | |'等待客户端'}

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({});
  }
});

angular.module（'app'，[]）.controller（'ExampleCtrl'，function（$scope）{
$scope.clients={
“IDa”：{“位置”：{索引：1}，“名称”：“a”}，
“IDb”：{“位置”：{索引：2}，“名称”：“b”}，
“IDc”：{“位置”：{索引：3}，“名称”：“c”}，
“IDd”：{“位置”：{索引：4}，“名称”：“d”}，
“IDe”：{“position”：{index:5}，“name”：“e”}
};
$scope.clientsArr=[]；
用于（风险值i，单位为$scope.clients）{
$scope.clientsArr.push({
id:我，
职位：$scope.clients[i]。职位，
名称：$scope.clients[i].name
});
}
而（$scope.clientsArr.length<7）{
$scope.clientsArr.push（{}）；
}
});

您能否更清楚地了解一下您想要实现的目标？也许是一个有效的例子？另外，使用ng repeat、Limito筛选器和orderBy筛选器是否可以实现这一点？我担心ng repeat不起作用，因为视图必须有7项。而且它的对象可能有0个或少于7个项。我还需要注意客户端对象上的更改，因为有些项可以切换位置（position.index更改）、动态显示、取消缩放、更改属性值等等。也可以假设我有索引为1、2、4的项。我仍然需要在位置3有一个空项目。这段代码在这种情况下不起作用，因为它没有将元素放在正确的位置。

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

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({});
  }
});