0
所以我想過濾一個列表，我重複使用開關來篩選出一個禁用。關切換到常規列表。我使用角材作爲設計。我ng-showled showAll綁定加載所有列表。我正在使用asset.disabled重複放置殘疾人。所以我嘗試使用ctrl.infiniteAssets.disabled。將無法工作。帶開關角度過濾器列表（角材料）？
import angular from 'angular'
import assetClassificationTemp from './create-asset/partials/asset-classification-dialog.html';
import assetClassificationController from './create-asset/partials/classifications.controller.js';
import createAssetTemp from './create-asset/create-asset.html';
import createAssetController from './create-asset/create-asset.controller.js';
class AssetsController{
constructor(siAsset, $mdDialog, $state, siAlertDialog,$timeout, $rootScope, $log, $q, helpDialog,$mdMedia, siTenant,toastIt,$filter, $scope){
"ngInject";
this.siAsset = siAsset;
this.$mdDialog = $mdDialog;
this.$state = $state;
this.siAlertDialog = siAlertDialog;
this.$timeout = $timeout;
this.$rootScope = $rootScope;
this.$log = $log;
this.$q = $q;
this.helpDialog = helpDialog;
this.$mdMedia = $mdMedia;
this.siTenant = siTenant;
this.$filter = $filter;
this.$scope = $scope;
this.toastIt = toastIt;
}
$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;
}))
}
}
};
}
refresh =() => {
this.$state.reload();
}
sampleAction = (name, ev) => {
this.$mdDialog.show(this.$mdDialog.alert()
.title(name)
.content('You triggered the "' + name + '" action')
.ok('Great')
.targetEvent(ev)
);
};
loadDetail = (asset) => {
this.$state.go('administration.assetdetail', {
componentId: asset.id
});
}
remoteSearch = (searchText) => {
var deferred = this.$q.defer();
this.siAsset.searchComponents(searchText, true)
.then((data) =>{
delete data.success;
deferred.resolve(data);
}, (err) => {
deferred.reject(err);
});
return deferred.promise
}
createAsset = (ev) => {
this.getClassificationList(ev);
};
deleteAsset = (asset) =>{
let message = this.$filter('translate')('SI-MESSAGES.DEL-AST-MSG') + asset.name+'?';
let title = this.$filter('translate')('SUBHEADER.DEL-AST');
let button = this.$filter('translate')('BUTTON.DELETE');
this.siAlertDialog.confirm(message,title,button)
.then(() => {
this.siAsset.deleteAsset(asset.id).then((data) =>{
this.toastIt.simple(this.$filter('translate')('SI-MESSAGES.ASSET-DEL-TOST'))
this.refresh()
},(err) => {
this.siAlertDialog.warning(this.$filter('translate')('SI-MESSAGES.AST-CANT-DEL'));
})
})
};
showCreateAssetDialog = (ev) =>{
this.$mdDialog.show({
template:createAssetTemp,
controller: createAssetController,
controllerAs:'ctrl',
event:ev,
fullscreen: true,
locals:{
classificationList : this.classificationList,
hasChilds: this.hasChilds,
selectedClassification : this.classification
}
})
.then((resp) =>{
if(resp !== 'closed'){
this.loadAssets();
}
},() => {
console.log("Error")
});
};
//Get classifications past locations level (classifications of assets
//i.e Parent Asset, Child Asset
getLevel =() =>{
var deferred = this.$q.defer();
this.siTenant.getId().then((tenantID) =>{
this.siTenant.getById(tenantID)
.then((_tenant) =>{
deferred.resolve(_tenant.locationsLevels);
},(err) =>{
deferred.reject(err);
})
},(err) =>{
deferred.reject(err);
})
return deferred.promise
};
showAssetTypesDialog = (ev) =>{
this.$mdDialog.show({
template:assetClassificationTemp,
controller: assetClassificationController,
controllerAs:'ctrl',
fullscreen: true,
locals:{
classificationList : this.classificationList
}
})
.then((data) => {
if(data !== 'closed'){
this.classification = data;
this.showCreateAssetDialog(ev);
}
},(err) => {
console.log(err);
console.log("Types Dialog Error!")
});
};
getClassificationList = (ev) =>{
this.getLevel().then((_locationLevel) => {
this.siAsset.getClassifications()
.then((data) => {
this.classificationList = [];
data.map((c) => {
if (c.level > _locationLevel) {
this.classificationList.push(c);
}
});
if(this.classificationList.length > 1){
this.hasChilds = true;
this.showAssetTypesDialog(ev);
}else{
this.hasChilds = false;
this.showCreateAssetDialog(ev);
}
},(err) => {
this.siAlertDialog.error(err.message || 'Error fetching tenant location levels') ;
});
});
};
displayHelp = (ev) => {
this.helpDialog.display(ev, this.$filter('translate')('ASSETS-TIPS.ASSET-TITLE'), this.$filter('translate')('ASSETS-TIPS.ASSETS-TIP-DESC'));
}
}
export default AssetsController;<md-toolbar class="md-primary">
<md-progress-linear ng-show="$ctrl.loading || $ctrl.global.stateIsLoading" class="md-accent" md-mode="indeterminate"></md-progress-linear>
<div class="md-toolbar-tools" layout-align="space-between center">
<md-button ng-hide="$ctrl.hideToolbarTools" class="md-icon-button cssFade" aria-label="Toggle Menu" ng-click="$ctrl.global.toggle()" hide-gt-lg>
<md-icon md-svg-icon="menu"></md-icon>
</md-button>
<span ng-hide="$ctrl.hideToolbarTools" class='cssFade'>
<md-button aria-label="Go Back" ng-if="$ctrl.global.breadcrumbs" class="md-icon-button" ng-click="$ctrl.$rootScope.goBack()">
<md-icon md-svg-icon="arrow-back"></md-icon>
</md-button>
<h1>{{$ctrl.global.topic}}</h1>
<h1>{{$ctrl.global.subTopic | uppercase}}</h1>
</span>
<span flex ></span>
<expand-search
search="$ctrl.searchValue"
remote-search="$ctrl.remoteSearch"
on-selection="$ctrl.loadDetail"></expand-search>
<si-tenant-toggle ng-hide='$ctrl.hideToolbarTools' is-dark='false'></si-tenant-toggle>
<md-button aria-label="Help Button" ng-hide='$ctrl.hideToolbarTools' class='md-icon-button cssFade' ng-click='$ctrl.displayHelp($event)'>
<md-icon md-svg-icon='help'></md-icon>
</md-button>
</div>
</md-toolbar>
<div layout="row" layout-align="center end" class="resolvedSwitch">
<md-switch ng-model='$ctrl.switch' ng-change="">
{{'LABELS.SHOW-DISABLED' | translate}}
</md-switch>
</div>
<div>
<md-content layout="column" class="full-height-content" layout-fill md-default-theme>
<div layout="column" flex>
<md-content class="full-height-content " >
<div ng-if="$ctrl.infiniteAssets.getLength() <= 0 && !$ctrl.loading " layout layout-align="center center" layout-padding>
<div class="notice " style=" text-align:center">
<p>
You have not defined any assets. To create a new asset, click the button on the bottom right of your screen
or <a class=" md-accent" ng-click="$ctrl.createAsset($event)"><span class="cursorPointer">click here</span></a>.
</p>
</div>
</div>
<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' 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>
<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' ng-click="$ctrl.loadDetail(asset)">
<span class="search-status" style="border-left-color:{{asset.statusColor}};"></span>
<p ng-if="asset.disabled">{{asset.name}} </p>
<label hide-xs ng-if="asset.disabled" class="ng-animate-disabled">
<md-chips>
<md-chip ng-if="asset.disabled">{{'LABELS.DISABLED' | translate}}</md-chip>
</md-chips>
</label>
<label ng-if="asset.disabled"><i>{{asset.status || 'UNKNOWN'}}</i></label>
<md-button ng-if="asset.disabled" 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>
</md-content>
</div>
</md-content>
</div>
<md-button aria-label="Create New Asset" class="md-fab md-fab-bottom-right" ng-click="$ctrl.createAsset()">
<md-icon md-svg-icon="add"></md-icon>
</md-button>
<si-tenant-toggle-menu></si-tenant-toggle-menu>
所以我採取了你的建議，主要解決了我的問題，我已經更新了問題中的代碼。我仍然需要保留md-virtual-repeat-container。我現在面臨的問題是，殘疾人資產混亂，不移動到頂端。實質上它隱藏了所有沒有禁用的資產，並保持殘疾人的地位不變。我已經在問題 –
中提出了這個圖片，它在示例中正常工作。 – nextt1