2016-09-09 9 views
0

テーブルをレンダリングする角度コンポーネントを作成していますが、ソート機能に関するいくつかの問題が発生しています。デバッガでトレースして、私はORDERBYをしていたことがわかったが、これは動作しませんでしたorderBy後に角度のスコープが更新されない

ng-repeat="row in $ctrl.list | orderBy:$ctrl.listState.sortBy:$ctrl.listState.sortReverse" 

:この場合、範囲は次のようになります。

$scope.listState = { 
    sortBy: '<string>', 
    sortReverse: <bool>, 
    headings: {...}, 
    list: [ 
     { 
      rowCols: { 
       user: '[email protected]', 
       name: 'Tim Franks', 
       since: '11/6/12' 
      } 
      rowState: {...} 
     }, 
     { 
      { 
       user: '[email protected]', 
       name: 'Alber Johns', 
       since: '11/12/13' 
      }, 
      rowState: {...} 
     }, 
     { 
      { 
       user: '[email protected]', 
       name: 'John Smith', 
       since: '7/28/14' 
      }, 
      rowState: {...} 
     } 
    ] 
}; 

私はもともと経由でリストをソートしてみました実際に正しい引数を取得し、適切にソートされたリストを返す。念のために、私はこのように、私のコントローラでORDERBYを使用するようにコードを変更:

this.listState.list = _this.orderBy(listState.list, 'rowCols.' + listState.sortBy, listState.sortReverse); 

これは、(コンストラクタ内で呼び出さ)初めて動作しますが、その後の作業を停止します。私はこれが私が完全に理解していない角度の範囲のいくつかの側面であると確信しています。どんな助けもありがとう。

+0

申し訳ありませんが、あなたが達成したいことを明確にしてください。 – plong0

答えて

0

はそれを考え出しました。問題は、リストの行をレンダリングするために属性ディレクティブを使用し、属性ディレクティブとng-repeatが同じ要素にあることでした。これにより、2つのディレクティブの間でスコープの競合が発生しました。私はng-repeatの中のdivに私の指示を移しました。

1

ng-repeatの式のフィルタを使用しても、元のモデルは更新されず、配列のコピーが作成されます。

あなたはthis.listState.list = _this.orderBy(...)で正しい軌道に乗っています...それは一度だけ呼び出されることは意味があります。 $watchCollectionがある場合、私は思い出すことができない

$scope.$watchCollection('listState.list', function listChanged(newList, oldList){ 
    $scope.listState.list = _this.orderBy(...); 
}); 

listState.listモデルは、コントローラのロード後に新しい値を取得しているし、あなたがそれらの新しい値で訴えるしたい場合は、おそらくのようなものを使用したいと思います順序が変更された場合変更を登録しようとしていますが、そのコードで無限ループで終わるならば、あなたのようなブロッカーを入れることができます:

var listSorting = false; 
$scope.$watchCollection('listState.list', function listChanged(newList, oldList){ 
    if(!listSorting){ 
     listSorting = true; 
     $scope.listState.list = _this.orderBy(...); 
     $timeout(function resetSortBlock(){ // try it without the $timeout to see if it will work 
      listSorting = false; 
     }); 
    } 
}); 
+0

あなたの答えは、ng-repeatが独自のスコープを作成することを覚えています。これは問題を解決するのに役立ちました。ありがとうございました! – flimsy

関連する問題