将一组名称相似的属性设置为 false

Question

在 AngularJS 项目中，视图模型具有几个与导航相关的属性，这些属性以单词"show"开头。 有一个函数在调用时将这些设置为 false：

var hideComponents = function() {
vm.showAddress = false;
vm.showEvent = false;
vm.showAccount = false;
//several others not displayed here
}

有没有办法使用通配符将所有以单词"show"开头的属性设置为 false？ 我在想这样的事情：

vm['show'*] = false;

但该语法不正确。

Answer 1

你可以这样做：

Object.keys(vm).forEach(key => {
if (key.startsWith('show')) {
vm[key] = false;
}
})

Answer 2

下面是一个可能的解决方案，使用对象或数组：

var vm.firstConfig = {
showAddress: false,
showEvent: false,
showAccount: false
};
var vm.secondConfig = {
showMenu: false,
showThis: false,
showThat: false
};
$scope.showHideComponents = function(value) {
for (var i in vm.firstConfig) {
vm.firstConfig[i] = value;
}
for (var i in vm.secondConfig) {
vm.secondConfig[i] = !value;
}
}

如果您从 HTML 调用，请执行以下操作：

<input type="checkbox" ng-model="toggle" ng-click="showHideComponents(toggle)" />

或者，如果您只想将它们放在一行上：

vm.showAddress = vm.showEvent = vm.showAccount = false;

参考：轻松将多个变量设置为 false 或 true