如果某些属性为假，则对象的角度过滤数组？

Question

所以我有一个对象数组，我正在重复并且工作得很好，但我想列出属性值为 'true' 的对象数组。我觉得内置的angualr过滤器应该足够了。但不能让它工作

这是我的尝试。基本上我只想要具有禁用属性'true'的对象的asset.name、asset.status等

<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 | assetsFilter:$ctrl.searchValue | filter:{disabled:true}:true" 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>

  $onInit = () => {
        this.swtich           = false;
        this.hideToolbarTools = false;
        this.searchOpen       = false;
        this.componentList    = [];
        this.alertCount       = 0;
        this.loading          = false;
        this.disableTitle     = false;
        this.searchValue      = "";
        this.first            = true;
        this.settings         = {
                        printLayout: true,
                        showRuler: true,
                        showSpellingSuggestions: true,
                        presentationMode: 'edit'
        };

        this.global = this.$rootScope;

        this.$rootScope.$on('transform-toolbar-open', () => { 
           //hide toolbar controls on mobile
            
            if(this.$mdMedia('xs')){
                this.hideToolbarTools = true;        
            }else{
                this.hideToolbarTools = false
            }
        })

        this.$rootScope.$on('transform-toolbar-close', () => { 
            //show toolbar controls
            this.hideToolbarTools = false;
        })
        this.loadAssets()
    }


      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('check',this.infiniteAssets)
    }

Answer 1

实际上 filter:{disabled:true} 可以正常工作。

如果它不起作用，我认为您可以在脚本端将它们过滤为

var infiniteAssets = infiniteAssets.filter(i=>i.disabled == true);

或使用角度滤镜

var infiniteAssets = $filter('filter')(infiniteAssets,{disabledled:true})

Answer 2

您可以尝试将 ng-if 条件放在 ng-repeat 下方

<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 ng-click="$ctrl.loadDetail(asset)">
         <div ng-if="asset.disabled">             
         <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>
          </div>
        </md-list-item>
      </md-list>
    </md-virtual-repeat-container>

Answer 3

我决定为残疾人创建一个全新的功能并使用javascript过滤器来实现这个功能

 if(! asset.statusCode){
                               let disabled = asset.filter((a)=>{                             
                                return a.disabled ==true
                            })
                                this.items = this.items.concat(disabled);
                                this.toLoad_ = this.items.length;
                                this.numLoaded_ = this.toLoad_;
                            }