選中單選輸入時Angular.js顯示DIV

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個這樣的無線電輸入。 我想顯示並隱藏每個選中的對象。 我嘗試了ng-click='someFunction()'但是它不起作用，無論如何我都不認為這是最好的方法。

如果我檢查了第一個收音機，例如選中了第三個，則要隱藏所示的收音機並顯示第一個。

我的控制器具有此變量。 我的想法是將它用於true / false（顯示/隱藏），但是也許有一個漂亮而干凈的解決方案。

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>  

我已經創建了這個 plnkr，您也可以在那里看到代碼。

我剛剛用四個div創建了它，我相信最佳實踐是如果這些div有共同點，則使用數組和ng-repeat來完成工作。