3

次のような大きなオブジェクトがあります。

scope.marketplaces = {

    first_example : { ... },
    second_example : { ... },

    ...

};

私がやろうとしているのは、次のような大きなオブジェクトをループすることです:

<section>
    <ul>
        <li ng-repeat="(key, value) in marketplaces"></li>
    </ul>
</section>

そしてループ内で、各オブジェクトを再度ループしますが、DOM に追加する代わりに、次のようにします。

<li> ... first level loop ...

    <li> ... second level loop ... </li>
</li>

<li></li>ループしているレベルにもかかわらず、1つだけにしたいと思います。そのようにしたい理由はkey、最初のループの をレベル ループで参照する必要があり、まだ 1 つしかないためliです。

私はそれng-repeat="friend in friends | filter:searchText"が私が望むことをすることができると読んだことがありますが、フィルター式で動的に指定できるかどうか、keyまたは代わりに必要な何かを指定できるかsearchTextどうかはわかりません(オブジェクトの既知のプロパティであると思います)。

だから私の質問は、今説明したことを で達成できますか、filterそれとも別の方法がありますか?

4

1 に答える 1

4

質問を理解できたと思います: ネストされたオブジェクトに 1 つの ngRepeat を使用したいと考えています。オブジェクトを線形化するようなものです。

最初のアプローチは、フィルターを作成することです。

app.filter('linear', function() {
  return function(value) {
    var result = {};
    for(var key in value) {
      for(var cKey in value[key]) {
        result[key+'_'+cKey] = value[key][cKey];
      }      
    }
    return result;
  };
});

そしてthmlで：

<li ng-repeat="(key, value) in marketplaces | linear">
          {{key}}: {{value}}
</li>

しかし残念なことに、フィルターで新しい要素を作成すると、AngularJS には問題があります。コンソールに次のようなエラー メッセージが表示される場合があります。

10 $digest iterations reached

ハックがなければ$$hash、今のところその機能を実現することはできません(間違っている場合は修正してください)。

したがって、今のところ解決策は、コントローラーで「マーケットプレイス」を監視し、ngRepeat で使用するコントローラーと同じコードを使用して新しいオブジェクトを作成することだと思います。

$scope.$watch('marketplaces', function(value) {
    var result = {};
    for(var key in value) {
      for(var cKey in value[key]) {
        result[key+'_'+cKey] = value[key][cKey];
      }      
    }
    $scope.linearMarketplaces = result;

  }, true);

そしてHTMLで：

    <li ng-repeat="(key, value) in linearMarketplaces">
      {{key}}: {{value}}
    </li>

両方のソリューションを備えたプランカー: http://plnkr.co/edit/pYWFhqSqKAa9gpzek77P?p=preview

于 2013-02-17T15:57:27.293 に答える