Javascript 带开关的角度过滤器列表（角度材质）？

因此，我试图过滤一个列表，我重复使用一个开关来过滤一个出现禁用的列表。关闭切换到常规列表。我使用角材料作为设计。正在使用showAll绑定加载所有列表。我正在使用asset.disabled将禁用的放置在重复中。所以我尝试使用ctrl.infiniteAssets.disabled。不起作用

从“angular”导入angular 从“./create asset/partials/asset classification dialog.html”导入assetClassificationTemp； 从“./create asset/partials/classification.controller.js”导入assetClassificationController； 从“/create asset/create asset.html”导入createAssetTemp； 从“./create asset/create asset.controller.js”导入createAssetController； 类资产控制器{ 构造函数IASSET、$mdDialog、$state、siAlertDialog、$timeout、$rootScope、$log、$q、helpDialog、$mdMedia、siTenant、toastIt、$filter、$scope{ 非侵入； this.siAsset=siAsset； 此.$mdDialog=$mdDialog； 这个。$state=$state； this.siAlertDialog=siAlertDialog； 这个。$timeout=$timeout； 这。$rootScope=$rootScope； 这个。$log=$log； 这.$q=$q； this.helpDialog=helpDialog； 这。$mdMedia=$mdMedia； this.siTenant=siTenant； 这个.$filter=$filter； 这个.$scope=$scope； this.toastIt=toastIt； } $onInit==>{ this.swtich=false； this.hideToolbarTools=false； this.searchOpen=false； this.componentList=[]； this.alertCount=0； 这一点：加载=错误； this.disableTitle=false； this.searchValue=； 第一个=正确； 此参数。设置={ 版式：对， 是的， 显示拼写建议：正确， presentationMode:“编辑” }; this.global=this.$rootScope； 这是'transform-toolbar-open'上的.$rootScope.$，=>{ //隐藏移动设备上的工具栏控件 如果此项为$mdMedia'xs'{ this.hideToolbarTools=true； }否则{ this.hideToolbarTools=false } } 这是'transform-toolbar-close'上的.$rootScope.$，=>{ //显示工具栏控件 this.hideToolbarTools=false； } 这是loadAssets } loadAssets==>{ var self=这个； self.infiniteasets={ 加载数量：0， toLoad_u0：， 项目：[]， pageNum:1， 虚拟索引：0， getItemAtIndex：函数索引{ 这个.virtualIndex=索引； 如果索引>this.numLoaded\u{ this.fetchMoreItems\u索引； 返回null； } 返回此.items[索引]； }, //必需的。 getLength:函数{ 如果this.virtualIndex>this.numLoaded\u{ 返回此.numloated\ux； }否则{ 返回此.numloated+5； } }, fetchMoreItems\函数索引{ 如果此.toLoad<索引{ 自加载=真； 此.toLoad+等于20； self.siAsset.getAssetsthis.pageNum++，20 .thenangular.bindthis，函数资产{ //this.objLength=assets.length； if！assets.statusCode{ this.items=this.items.concatassets； this.toLoad=this.items.length； this.numLoaded u=this.toloaded； } 自加载=错误； } } } }; } 刷新==>{ 此.$state.reload； } sampleAction=名称，ev=>{ 此。$mdDialog.showthis。$mdDialog.alert .标题名 .content'您触发了'+name+'操作' 好的，太好了 .塔格特文提夫 ; }; loadDetail=资产=>{ 这是$state.go'administration.assetdetail'{ componentId:asset.id }; } remoteSearch=searchText=>{ 递延风险值=此。$q.递延； this.siAsset.searchComponentssearchText，true .thendata=>{ 删除数据。成功； 递延数据； }，err=>{ 延迟。拒绝错误； }; 延期退换货 } createAsset=ev=>{ this.getClassificationListV； }; deleteAsset=资产=>{ 让message=this.$filter'translateSI-MESSAGES.DEL-AST-MSG'+asset.name+'？'； 设title=this.$filter'translateSUBHEADER.DEL-AST'； let button=this.$filter'translateBUTTON.DELETE'； 此.siAlertDialog.confirmmessage、标题、按钮 .然后=>{ this.siAsset.deleteAssetasset.id.thendata=>{ this.toastIt.simplethis.$filter'translateSI-MESSAGES.ASSET-DEL-TOST' 这个。刷新 }，err=>{ 此.siAlertDialog.warningthis.$filter'translateSI-MESSAGES.AST-CANT-DEL'； } } }; showCreateAssetDialog=ev=>{ 这是.mdDialog.show{ 模板：createAssetTemp， 控制器：createAssetController， controllerAs:“ctrl”， 活动:电动汽车,， 全屏：对， 当地人：{ classificationList:this.classificationList， hasChilds:这个，hasChilds， selectedClassification:this.classification } } .thenresp=>{ ifresp！=“已关闭”{ 这是一项重要的资产； } }, => { 控制台日志错误 }; }; //获取超过位置级别资产分类的分类 //i、 e母资产、子资产 getLevel==>{ 递延风险值=此。$q.递延； this.siTenant.getId.thentenantID=>{ this.siTenant.getByIdtenantID 。然后_租户=>{ deferred.resolve_tenant.locationsLevels； }，err=>{ 延迟。拒绝错误； } }，err=>{ 延迟。拒绝错误； } 延期退换货 }; showAssetTypesDialog=ev=>{ 这是.mdDialog.show{ 模板：assetClassificationTemp， 控制器：资产分类控制器， controllerAs:“ctrl”， 全屏：对， 当地人：{ classificationList:this.classificationList } } .thendata=>{ ifdata！=“已关闭”{ 本分类=数据； 此.showCreateAssetDialogev； } }，err=>{ console.logerr； console.logTypes对话框错误！ }; }; getClassificationList=ev=>{ this.getLevel.then_locationLevel=>{ this.siAsset.getClassifications .thendata=>{ this.classificationList=[]； data.mapc=>{ 如果c.level>位置level{ this.classificationList.pushc； } }; 如果此.classificationList.length>1{ this.hasChilds=true； 此.showAssetTypesDialogev； }否则{ this.hasChilds=false； 此.showCreateAssetDialogev； } }，err=>{ this.siAlertDialog.errorerr.message | |“获取租户位置级别时出错”； }; }; }; displayHelp=ev=>{ this.helpDialog.displayev，this.$filter'translateASSETS-TIPS.ASSET-TITLE'，this.$filter'translateASSETS-TIPS.ASSETS-TIP-DESC'； } } 导出默认资产控制器； {{$ctrl.global.topic} {{$ctrl.global.subTopic |大写} {{'LABELS.SHOW-DISABLED'| translate}} 您尚未定义任何资产。要创建新资产，请单击屏幕右下角的按钮 或者点击这里。

{{asset.name}}

{{'LABELS.DISABLED'| translate}} {{asset.status | |'UNKNOWN'}

{{asset.name}

{{'LABELS.DISABLED'| translate}} {{asset.status | |'UNKNOWN'} 您只需要使用您的ng switch模型，将每个项目的状态设置为co 条件在ng if中。您可以直接在md内容中使用md列表和md列表项。不需要使用md虚拟重复容器，因为md内容将在需要时添加滚动条

下面是Javascript

angular.module('myApp',['ngMaterial'])
.controller('TempController',function($scope){
 $scope.tempSwitch = true;
 $scope.data= [
 {name: "Asset 1", status: true},
 {name: "Asset 2", status: true},
 {name: "Asset 3", status: true},
 {name: "Asset 4", status: true},
 {name: "Asset 5", status: true},
 {name: "Asset 6", status: true},
 ];

 $scope.delete = function(item){
 item.status = !item.status;
 }
 $scope.itemClick= function(item){
 console.log(item);
 }
});

HTML代码

<body layout="column" layout-fill ng-app="myApp" ng-cloak ng-controller="TempController">

 <div layout="row" layout-align="center end" class="resolvedSwitch">
  <md-switch ng-model='tempSwitch'>
  SHOW-DISABLED
  </md-switch>
</div>
 <md-content layout="column" flex style='background-color:#d1d1d1'>
   <md-list>
     <md-list-item ng-click="itemClick(item)" ng-repeat="item in data" layout-align="start center" ng-show="item.status || tempSwitch">
       <span>{{item.name}} </span>
       <span flex></span>
       <span>{{item.status}}</span>
       <md-button aria-label="Delete Asset" class="md-icon-button md-warn" ng-click="delete(item)">
              <md-icon>D</md-icon>
       </md-button>
       <md-divider></md-divider>
      </md-list-item>
   </md-list>
 </md-content>
</body>

---

这是一个工作示例。

所以我采纳了您的建议，基本上解决了我的问题，我已经更新了问题中的代码。我仍然需要保留md虚拟重复容器。我现在面临的问题是，残废资产变得杂乱无章，没有移动到顶层。本质上，它隐藏所有未禁用的资产，并保持禁用资产的位置不变。我已在问题中说明了这一点