更新

Question

我有一个页面，我想用几个单选按钮更新表单。我查询一个api，并使用返回的对象数组来填充单选按钮的当前值。我遇到的问题是只有最后一组单选按钮实际显示了该值。这是我的代码（我使用[[和]]作为角度的起点和终点符号）：

<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的值以确保有值）。

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

我还应该提一下，如果我保存表单，即使缺少单选按钮选项，数据库也会正确更新（它不会将值设置为null，如果我手动更改所选值，它是在数据库中也更新了。

有没有人有任何想法？谢谢！

修改

这是一个小提琴，虽然它在小提琴中正如预期的那样工作。 http://jsfiddle.net/dq8r196v/367/

我尝试使用我在小提琴中使用的静态数据，但我仍然遇到同样的问题。有谁知道这可能是一个CSS问题？单选按钮是样式化的，我没有编写HTML或CSS。

更新

我仍然遇到这个问题，所以我构建了一个新的角度应用程序，并且只使用了我创建的小提琴中包含的代码。我对这个新应用程序遇到了同样的问题，即使相同的代码在小提琴中起作用。我真的不明白这里发生了什么，但如果有人能说清楚，我会非常感激。

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

如果其他人想要试一试并确切了解发生了什么，请参阅以下新角度应用的完整代码：https://pastebin.com/qSR33yfM

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

以下是我在我的应用中使用的精确json的pastebin链接：https://pastebin.com/utfVVQfT

Answer 1

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

我知道有关ng-repeat创建新$scope的语义，并且假设范围与嵌套的ng-repeats存在冲突，其中它与单选按钮的绑定不正确且范围与您不同想要（部分级别ng-repeat）。

要确认这种怀疑，您可以将代码中的所有插值转换为在不同点使用函数和console.log s和f，并确认field_condition正在设置在你不打算的水平上。

无论哪种方式，最好通过数据（和使用ng-repeat）创建单选按钮，就像使用$scope.values数组一样，这样做的好处是不仅可以通过AJAX使用数据更新不同的值选项，或者你想要的，但是你不会遇到上面当前代码中遇到的奇怪的角度范围问题。

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

更新

1 个答案: