Angular filtering array of object if certain property is false?

Question

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

Answer 1

Actually the filter:{disabled:true} will work fine.

If it is not work I think you can filter them in you script side as

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

or use angular filter

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

Answer 2

you can try by putting ng-if condition below the 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

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