Question

我想在选择输入广播时显示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个这样的无线电输入。我要展示＆amp;检查一个时隐藏每个。我尝试使用ng-click='someFunction()'，但它无法正常工作，无论如何我认为这不是最好的方法。

如果我检查第一个收音机，例如，选中第3个，我想隐藏显示的那个并显示第一个收音机。

我的控制器有这个变量。我的想法是用它来表示真/假（显示/隐藏）但也许有一个漂亮而干净的解决方案。

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有共同点。

当选中无线电输入时，Angular.js显示DIV

1 个答案: