angularjs - ngRepeat 破坏了 Foundation Switch CSS。我该如何解决？

Question

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

在你把它放在一个ng-repeat. 然后，除了最后一个之外的所有开关都坏了——除非您单击它们，否则它们不会显示标签。

这是记录该问题的JSBin 。有谁知道怎么回事？

Answer 1

您的收音机需要 ng-model。如果您在每个单选按钮上包含一个 ng-model，它在您的 JSBin 中可以正常工作。

根据文档，还需要值。

编辑：

好的，看看这个版本，我终于让它与 ng-model 和 ng-value 一起工作，我了解到这比 value 更可取。你怎么看，这对你有用吗？

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

Answer 2

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

<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>

希望对某人有所帮助。