angularjs - 实现 div 组隐藏/显示

Question

我正在尝试实现一种机制来隐藏/显示组内的 div，这意味着我只想为组显示一个 div。当然，我可以使用 ng-show 指令来实现它，但我想要更通用的东西。

例如：

<div div-group="mygroup">
  <div id="div1"> ... </div>
  <div id="div2"> ... </div>
  <div id="div3"> ... </div>
</div>

如果我调用类似 showDiv("div1") 的函数，其他 div 将被隐藏（div2 和 div3）。我考虑在包含所有内部 div 状态（显示或隐藏）的根范围上添加一个对象。

非常感谢您的帮助！蒂埃里

Answer 1

一种方法是使用 ng-class

.show{
display:block
}

.hide{
display:none;
}

<div div-group="mygroup">
  <div id="div1" ng-class={true:'show',false:'hide'}[selecteddiv='div1']> ... </div>
  <div id="div2" ng-class={true:'show',false:'hide'}[selecteddiv='div2']> ... </div>
  <div id="div3" ng-class={true:'show',false:'hide'}[selecteddiv='div3']> ... </div>
</div>

$scope.choose=function(id){
$scope.selecteddiv=id;
}

所以你可以在函数中将正确的 id 作为字符串传递

Answer 2

如果你想在 vanilla js 中做到这一点，你可以showDiv像这样编写你的函数

function showDiv(id) {
  //hide all divs
  document.findElementById('div1').style.display = 'none';
  document.findElementById('div2').style.display = 'none';
  document.findElementById('div3').style.display = 'none';
  //show just the div you want
  document.findElementById(id).style.display = 'block'; //or whatever it was before
}