javascript - 嵌套 ng-repeat 中有几个单选按钮组，但只有最后一组显示值

Question

我有一个页面，我想在其中更新带有多个单选按钮的表单。我查询一个 api，并使用返回的对象数组来填充单选按钮的当前值。我遇到的问题是只有最后一组单选按钮实际上显示了该值。这是我的代码(我使用 [[ 和 ]] 作为 Angular 开始和结束符号):

<fieldset data-ng-repeat="s in sections">
    <div class="form-group">
        <div class="col-md-12">
            <h2>[[ s.section.name ]]</h2>
        </div>
    </div>

    <!-- Field Item -->
    <div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
        <div class="col-md-12 m-b-30">
            <h4>[[ f.field.name ]]</h2>
            <input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
        </div>

        <div class="col-sm-3">
            <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label>
        </div>
        <div class="col-sm-3">
            <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label>
        </div>
        <div class="col-sm-3">
            <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label>
        </div>
        <div class="col-sm-3">
            <input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label>
        </div>
    </div>
    [[ f.field_condition ]]
    <hr>
</fieldset>

所以基本上，我有几个部分，每个部分都有几个字段。每个字段都有自己的单选按钮组(我使用部分和字段 ID 来命名单选按钮组)。我当前看到的只是每个部分中的最后一个字段实际上显示了选定的单选按钮。其他字段没有任何选择，尽管 ng-model 的值肯定有(我显示 f.field_condition 的值只是为了确保有一个值)。

对于每个字段，我可以看到模型已设置。如果我手动选择一个值，我可以看到模型发生变化，所以在我看来模型设置正确。我只是不知道为什么它最初不会显示为除了最后一行以外的所有行的选定状态。

我还应该提到，如果我保存表单，即使缺少单选按钮选择，数据库也会正确更新(它不会将值设置为空，如果我手动更改所选值，则会在数据库也是如此)。

有人有什么想法吗？谢谢!

编辑

这是一个 fiddle ，尽管它在 fiddle 中按预期工作。 http://jsfiddle.net/dq8r196v/367/

我尝试使用 fiddle 中使用的静态数据，但仍然遇到同样的问题。有谁知道这是否是 CSS 问题？单选按钮已设计样式，但我没有编写 HTML 或 CSS。

更新

我仍然遇到这个问题，所以我构建了一个新的 Angular 应用程序，并且只使用了我创建的 fiddle 中包含的代码。我在这个新应用程序中遇到了同样的问题，即使相同的代码在 fiddle 中工作。我真的不明白这里发生了什么，但如果有人能提供一些线索，我将非常感激。

我已经将 fiddle 中的代码复制并粘贴到了一个新的 Angular 应用程序中，并且每个部分中只有最后一组单选按钮显示了应用程序中的值。

如果其他人想尝试一下并看看到底发生了什么，这是我的新 Angular 应用程序的完整代码:https://pastebin.com/qSR33yfM

为了简单起见，我在单个页面上创建了该应用程序。

以下是指向 Pastebin 的链接，其中包含我在应用程序中使用的确切 json:https://pastebin.com/utfVVQfT

Answer 1

我通过简单地添加代表不​​同单选按钮选项的对象数组 ($scope.values) 并使用 ng-repeat 创建单选按钮来解决您遇到的问题。请参阅以下内容了解更新后的代码:https://pastebin.com/s3hNzaXX

我知道 ng-repeat 创建新的 $scope 存在语义，并且想象一下，与嵌套的 ng-repeats 的作用域存在冲突，它错误地绑定(bind)到单选按钮，并且在范围与您想要的不同(部分级别 ng-repeat)。

为了证实这一怀疑，您可以将代码中的所有插值转换为在不同点使用函数和 console.log s 和 f 并确认 field_condition 被设置在您不希望的级别。

无论哪种方式，最好的做法是通过数据(并使用 ng-repeat)创建单选按钮，就像使用 $scope.values 数组一样，这样做有一个很好的副作用这不仅可以通过 AJAX 或您想要的方式使用数据来更新不同的值选项，而且您不会像在上面的当前代码中遇到的那样遇到奇怪的 Angular 范围问题。