ngRepeat打破了Foundation Switch CSS。我该如何解决？

Question

我正在尝试使用Zurb基金会的Switch组件。

直到你把它放在ng-repeat里面才能很好用。然后，除最后一个之外的所有开关都被打破 - 在您单击之前它们不会显示标签。

这是记录此问题的JSBin。有谁知道怎么了？

Answer 1

您的无线电需要ng-model。如果在每个单选按钮上都包含ng-model，它在JSBin中工作正常。

根据docs，还需要值。

编辑：

好的，看看this version，我终于让它与ng-model和ng-value一起工作，我学到的东西比价值更好。您怎么看？这对您有用吗？

显然，ng-repeat为每次迭代创建了一个子范围。使用$ parent似乎是一种方法。

Answer 2

发现我必须以下列方式使用“ng-checked”才能在“ng-repeat”中按预期工作。只要ng-clicked var对每个开关都是唯一的，就应该按预期工作。使切换功能成为切换true和false之间可见值的东西。

<div class="switch" ng-click="toggle()">
    <input type="radio" ng-checked="!visible">
    <label>Off</label>

    <input type="radio" ng-checked="visible">
    <label>On</label>
    <span></span>
</div>

希望能有所帮助。