【问题标题】:Angular 1.5 Radio Button ModelAngular 1.5 单选按钮模型
【发布时间】:2016-12-27 17:20:49
【问题描述】:

我在页面上有一个单选按钮,其 ng-value 被设置为“答案”对象。该变量的模型被设置为附属数组的特定元素。数据结构如下所示:

var user = { affiliations: [ {question: ..., answers: ... }, ... ] }

这样,每个“隶属关系”都有一个问题和一个或多个答案。我正在尝试在 AngularJS 中为此创建一个 UI,如下所示:

<form name='affiliationsForm'>
<div ng-repeat="(i, affiliation) in DS_OrgAffiliations">
    <h6>{{affiliation.question.name}}</h6>
    <div ng-if="affiliation.question.questionType=='MultipleAnswer'">
        ...
    </div>

    <div ng-if="affiliation.question.questionType=='SingleAnswer'">
        <label ng-repeat="answer in affiliation.answers">
            <div>
                <input type="radio" ng-model="$parent.DS_User.affiliations[i].answers" name="{{affiliation.question.name}}" ng-value="answer"> {{answer.answer}} </input>
            </div>
        </label>
    </div>

</div>
<button data-ng-click="submitAffiliations()">save</button>

在我的模型上,这实际上效果很好。我有一个小胶水代码来处理选择题和单题之间的差异,如果我对此表单进行更改,模型会毫无问题地反映更改。

问题是当表单在页面上初始化时,正确的单选按钮永远不会被选中。模型将在'answers'属性中显示一个答案对象,但表单没有' t 反映该值。更重要的是,选择一个单选按钮会为我们的模型分配正确的答案,如果我选择应该是活动的单选按钮,模型似乎不会改变。

我认为正在发生的事情是模型正在使用正确“答案”对象的深层副本而不是浅层副本进行初始化,并且该引用不同的事实导致了一个问题,尽管对象具有相同的内容。

这是正确的吗?为了验证这个理论,我这样做了:

 <input type="radio" ng-model="$parent.DS_User.affiliations[i].answers" name="{{affiliation.question.name}}" ng-value="answer" ng-checked="$parent.DS_User.affiliations[i].answer.answer==answer.answer"> {{answer.answer}} </input>

请注意,ng-checked 属性正在检查答案的成员以确保相似性。不幸的是,这也无法在页面加载时默认正确的单选按钮。

对此有何见解?我花了大约一个半小时来玩这个,我的参考解释似乎很可能,但是由于 ng-checked 属性使我失败,我一直无法找到一个线程。

【问题讨论】:

    标签: javascript angularjs forms radio-button


    【解决方案1】:

    所以我花了更多的时间在这上面,并整理了一个简单的小提琴。事实证明,Angular 在将对象存储在 ng-value 时只考虑引用,所以我的建议实际上是正确的。存储原语时,可以使用不同的值初始化模型,但存储对象时,您需要存储对实际模型条目的引用!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-26
      • 2016-06-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多