Javascript 嵌套ng中的多个单选按钮组重复,但只有最后一个组显示该值

Javascript 嵌套ng中的多个单选按钮组重复,但只有最后一个组显示该值,javascript,angularjs,Javascript,Angularjs,我有一个页面,我想用几个单选按钮更新表单。我查询一个api,并使用返回的对象数组填充单选按钮的当前值。我的问题是,只有最后一组单选按钮实际显示了值。这是我拥有的代码(我正在使用[[和]作为角度的开始和结束符号): [[s.section.name]] [[f.field.name]] 通过 失败 不适用 小心 [[f.现场条件]] 基本上,我有几个部分,每个部分都有几个字段。每个字段都有自己的单选按钮组(我使用节和字段ID来命名单选按钮组)。我目前看到的只是每个部分的最后一个字段实际显示了

我有一个页面,我想用几个单选按钮更新表单。我查询一个api,并使用返回的对象数组填充单选按钮的当前值。我的问题是,只有最后一组单选按钮实际显示了值。这是我拥有的代码(我正在使用
[[
]
作为角度的开始和结束符号):


[[s.section.name]]
[[f.field.name]]
通过
失败
不适用
小心
[[f.现场条件]]

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

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

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

有人有什么想法吗?谢谢

编辑

这是一把小提琴,尽管它在小提琴中的工作和预期的一样

我尝试使用我在小提琴中使用的静态数据,但我仍然有同样的问题。有人知道这是否是CSS问题吗?单选按钮是样式化的,我没有编写HTML或CSS

使现代化 我仍然有这个问题,所以我构建了一个新的angular应用程序,只使用了我创建的小提琴中包含的代码。我对这个新应用程序也有同样的问题,即使相同的代码在小提琴上也能工作。我真的不明白这里发生了什么,但如果有人能透露一些情况,我会非常感激

我已经从我的小提琴上复制并粘贴了代码到一个新的angular应用程序中,每个部分中只有最后一组单选按钮显示了应用程序中的值

如果其他人想试用新angular应用程序并查看到底发生了什么,以下是我的完整代码:

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


下面是我在我的应用程序中使用的带有确切json的pastebin的链接:

我只需添加一个表示不同单选按钮选项的对象数组(
$scope.values
),并使用ng repeat创建单选按钮,就解决了您遇到的问题。有关更新的代码,请参见以下内容:

我知道ng repeat创建新的
$scope
s有一些语义,想象一下,当它错误地绑定到单选按钮时,作用域与嵌套的ng repeat发生冲突,并且作用域与您想要的不同(节级ng repeat)

要确认此怀疑,您可以将代码中的所有插值转换为在不同点使用functions和console.log
s
f
,并确认
field\u条件
设置为您不希望的级别


无论采用哪种方式,最好的做法是通过数据(并使用ng repeat)创建单选按钮,就像使用
$scope.values
数组一样,这样做的一个好的副作用是,不仅可以通过AJAX使用数据更新不同的值选项,还可以根据需要进行更新,但是,在上面的当前代码中,您不会遇到奇怪的角度范围问题。

如果没有看到控制器中的数据,这里很难判断。请尝试在控制器中静态设置这些字段条件,然后加载页面,查看单选按钮是否具有正确的默认选定按钮。如果您可以与您的问题陈述共享一个小提琴或弹琴,那将是非常棒的。我添加了一个小提琴,但它似乎在那里工作。你们知道这是否是css问题吗?@Sehael在你们的实际应用程序中,上面的模板是否用于指令中?@Isaiah Lee不,不,这正是我需要的。非常感谢。
<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>