8

通常はng-repeatを使用して、表示したいアイテムがあります。ある順序で (簡単に) を表示したいのですが、順序付けられた属性が変更されるたびに、その間に HTML が必要です。

例: (フィドル):

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | orderBy:'role'">
        {{item.role}} - {{item.name}}
   </div>
</div>

function Main($scope){
    $scope.items = [{name: 'First', role: 1}, 
                    {name: 'Second', role:2}, 
                    {name: 'Third', role: 1}, 
                    {name: 'Fourth', role: 2}];
    }

印刷したい：

1 - 最初
1 - 3 番目
(一部区切りコード)
2 - 2 番目
2 - 4 番目

4

2 に答える 2

1

@lucumaによるソリューションは、ループを初めて通過したときにのみ機能します。Angular がリストを更新すると、変数は前のループから設定されたままになります。

代わりに、header初期化中に新しい属性をリストに追加しました (たとえば、 )。

function Main($scope){
    $scope.items = [{name: 'First', role: 1, header: false}, 
                    {name: 'Second', role:2, header: false}, 
                    {name: 'Third', role: 1, header: true}, 
                    {name: 'Fourth', role: 2, header: false}];
}

次に、@lucuma による HTML が機能します。

<div ng-app ng-controller="Main">
  <div ng-repeat="item in items | orderBy:'role'">
    <div ng-show="item.header">    // <== with this change
      something here for the header
    </div>
    {{item.role}} - {{item.name}}
  </div>
</div>

ああ、初期化時にリストを一度並べ替えて、orderByフィルターを削除することもできます。

于 2014-01-22T15:56:28.927 に答える