Search code examples
javascriptangularjsangularjs-ng-repeatangular-materialangular-filters

Angular filtering array of object if certain property is false?


enter image description here so i have an array of object i am ng-repeating and works beautifully, but i want to list the array of objects that have a property value of 'true' . i feel like the built in angualr filter should be sufficient. But cant get it to work

here is my attempt . Basically i only want asset.name , asset.status etc of the objects that have disabled property 'true'

<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)
    }


Solution

  • i decide to create a whole new function for disabled ones and use javascript filter to achieve this feature

     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_;
                                }