ng-repeatのAngular 1.5フィルターがidでトラックで動作しない

だから私はこれを行うために非常に多くの異なる方法を試しました。非常に多くのStackOverflowに続いて、これを動作させることができませんでした。私がしようとしているのは、ブール値のプロパティの値に基づいていくつかのリストアイテムをフィルタリングすることです。以下は私のオブジェクトデータの写真です。私が従う最も近い例はこの質問Filtering an Angular 1.2 ng-repeat with "track by" by a boolean propertyです。まだ動かない。それはオブジェクトリテラルとは何か関係があり、このタイプのプロパティのフィルタリングは配列でしか動作しませんか？私はjavascriptには新しいので、よく分からない。また、角度素材、仮想リピートコンテナと物事が結果に影響を与えていない基づいて、他の材料を使用して、私はあなたを1として ng-repeatのAngular 1.5フィルターがidでトラックで動作しない

 loadAssets =() => { 
 

 
     var self = this; 
 
     self.infiniteAssets = { 
 
      numLoaded_: 0, 
 
      toLoad_: 0, 
 
      items: [], 
 
      pageNum:1, 
 
      virtualIndex:0, 
 

 
      getItemAtIndex: function (index) { 
 
       this.virtualIndex=index; 
 

 
       if (index > this.numLoaded_) { 
 
        this.fetchMoreItems_(index); 
 
        return null; 
 
       } 
 
       return this.items[index]; 
 
      }, 
 

 
      // Required. 
 
      getLength: function() { 
 
       if (this.virtualIndex > this.numLoaded_) { 
 
        return this.numLoaded_ ; 
 
       }else{ 
 
        return this.numLoaded_ + 5 ; 
 
       } 
 
      }, 
 

 
      fetchMoreItems_ : function (index) { 
 
       if (this.toLoad_ < index) { 
 
        self.loading = true; 
 
        this.toLoad_ += 20; 
 
        self.siAsset.getAssets(this.pageNum++,20) 
 
         .then(angular.bind(this, function (assets) { 
 
          //this.objLength = assets.length; 
 
          if(! assets.statusCode){ 
 
           this.items = this.items.concat(assets); 
 
           this.toLoad_ = this.items.length; 
 
           this.numLoaded_ = this.toLoad_; 
 
          } 
 
          self.loading = false; 
 
         })) 
 
       } 
 
      } 
 
     }; 
 
     console.log('++++++++++',self.infiniteAssets)

<md-virtual-repeat-container id="vertical-container" ng-show="$ctrl.infiniteAssets.getLength() > 0 && $ctrl.switch"> 
 
     
 
      <md-list> 
 
      <md-list-item class="list-page" md-on-demand md-virtual-repeat="asset in $ctrl.infiniteAssets | filter: {disabled: true } track by asset.id" ng-click="$ctrl.loadDetail(asset)"> 
 
       <span class="search-status" style="border-left-color:{{asset.statusColor}};"></span> 
 
       <p >{{asset.name}} </p>     
 
       <label hide-xs ng-if="asset.disabled" class="ng-animate-disabled"> 
 
       <md-chips > 
 
        <md-chip >{{'LABELS.DISABLED' | translate}}</md-chip> 
 
       </md-chips> 
 
       </label> 
 
       <label ><i>{{asset.status || 'UNKNOWN'}}</i></label> 
 
       <md-button aria-label="Delete Asset" class="md-icon-button md-warn" layout-padding ng-click="$ctrl.deleteAsset(asset)"> 
 
         <md-icon md-svg-icon="delete" class="modelTrashIcon"></md-icon> 
 
        </md-button> 
 
       <md-divider></md-divider> 
 
      </md-list-item> 
 
      </md-list> 
 
     </md-virtual-repeat-container>

出典

2017-07-07 Anu Rajan

コードスニペットの代わりにプランカを挿入すると、問題の作業に本当に役立ちます – user93

track by value_to_be_trackedbyは、$ indexやidなどのリスト内の各項目に対して一意である必要があります。 – user93

あなたはフィルタを使用して、特定のmd-virtual-repeat作品はありますか？ AngularJS Materialsバーチャルリピートは、ng-repeatのカスタムインプリメンテーションであるため、オリジナルのものとまったく同じように動作することは期待できません。ここにはドキュメンテーションがあります。

仮想の繰り返しは、容器を満たすと、ユーザースクロールとして、それらをリサイクルするだけ十分なDOMノードをレンダリングNGリピートための限られた代用品です。

オブジェクトは配列ではありませんが、繰り返しはサポートされていません。 トラックby、エイリアスと（キー、値）の構文はサポートされていません。

私はあなたのコントローラーの代わりにフィルターを移動し、コレクションが変更されるたびにフィルターが再適用されることを確認します。

出典

2017-07-07 04:41:39

私は一般的な作品のフィルタを知っています、私はそれを検索に使用しました前にフィルターをかける。 Uはプロパティによってフィルターがついている可能性があり、オブジェクトはサポートされていません。 –

コントローラで使用しようとしましたが、コードを正しく書いていますか？ 'self.test = self.infiniteAssets.filter（i => i.disabled == true）; または角度フィルタを使用する self.test = self。$ filter（ 'filter'）（infiniteAssets、{disabled：true}） 'とctrl.testのng repeatアセットで –

このような単純なフィルタの場合、 angleの$ filterサービスなので、私はあなたの最初のアプローチが一番好きです。それは正しいように見えます（あなたのターゲットブラウザが矢印機能をサポートしていると仮定します）。コレクションが変更されたときはいつでもフィルタを再適用してください。 –

作業だけではなく、この特定のプロパティによってフィルタ全体のデータを表示することができます言った"Angular 1.5 filter with ng-repeat not working by track by id"

AngularJs 1.5を使用してサンプルサンプルを作成し、トラックでフィルタをng-repeatに使用しました。

angular.module('controllerAsExample', []) 
 
    .controller('SettingsController1', SettingsController1); 
 

 
function SettingsController1() { 
 
    
 
    this.infiniteAssets = [ 
 
    {disabled :false, name:'test0',id:234 }, 
 
    {disabled :true, name:'test1',id:123 }, 
 
    {disabled :false, name:'test2',id:345 } 
 
    ]; 
 
     //console.log(this.infiniteAssets); 
 
}

<!doctype html> 
 
<html > 
 
    <head> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
    
 
    </head> 
 
    <body ng-app="controllerAsExample"> 
 

 
<div ng-controller="SettingsController1 as settings"> 
 
    <p>ng-repeat with track by field example using angularjs 1.5.0:</p> 
 
    <ul> 
 
<li ng-repeat="asset in settings.infiniteAssets | filter: {disabled: false } track by asset.id"> 
 
{{asset.name}} 
 
</li> 
 
</ul> 
 
</div> 
 

 

 

 
    </body> 
 
</html>

出典

2017-07-07 04:20:43

よく問題はバージョンではありません。仮想リピータかもしれない。私はコントローラでそれを使ってみましたが、コードを正しく書いていますか？ 'self.test = self.infiniteAssets.filter（i => i.disabled == true）; （フィルタ）（infiniteAssets、{disabled：true}） 'とctrl.testの反復アセットで –

ng-repeatのAngular 1.5フィルターがidでトラックで動作しない

答えて

関連する問題