javascript - Angular.js 在选中 radio 输入时显示 DIV

Question

我想在选择input-radio时显示一个div。

<div>
  <div class="radio c-radio">
    <label>
      <input type="radio" name="specialType" ng-model="vm.specialType.closed" />
      <span class="fa fa-check"></span>First Radio
    </label>
  </div>
  <div ng-show="vm.specialType.closed">
    <label>Day: </label>
    <input type="date" class="form-control" />
  </div>
</div>

我有 4 个像这样的 radio 输入。我想在选中一项时显示和隐藏每一项。我尝试使用 ng-click='someFunction()' 但它不起作用，无论如何我不认为这是最好的方法。

如果我检查第一个 radio ，例如检查第 3 个 radio ，我想隐藏显示的 radio 并显示第一个 radio 。

我的 Controller 有这个变量。我的想法是用它来判断真/假(显示/隐藏)，但也许有一个漂亮而干净的解决方案。

vm.specialType = {
  closed: false,        //1st radio
  open: false,          //2nd radio
  ownGuards: false,     //3rd radio
  foreignGuards: false  //4th radio
};

Answer 1

如果您想一次只显示一个 div，您可以只使用一个变量来告诉您应该显示哪个 div。在这种情况下，您只需要一个模型。

对于每个div，将div编号与模型的值进行比较，看看是否需要显示该div。每个单选按钮都会将自己的值分配给模型。

  <div>
    <div ng-show="vm.which==1"><h1>1</h1></div>
    <input type="radio" ng-model="vm.which" name="vis" value="1" />
  </div>
  <div>
    <div ng-show="vm.which==2"><h1>2</h1></div>
    <input type="radio" ng-model="vm.which" name="vis" value="2" />
  </div>
  <div>
    <div ng-show="vm.which==3"><h1>3</h1></div>
    <input type="radio" ng-model="vm.which" name="vis" value="3" />
  </div>
  <div>
    <div ng-show="vm.which==4"><h1>4</h1></div>
    <input type="radio" ng-model="vm.which" name="vis" value="4" />
  </div>  

我创建了this plnkr，您也可以在那里看到代码。

我刚刚用四个 div 创建了它，我相信最佳实践是使用数组和 ng-repeat 来完成工作(如果这些 div 有共同点)。