单击时角度无线电输入未填充模型的问题答案

【问题标题】：Issue with angular radio input not populating the model when clicked单击时角度无线电输入未填充模型的问题
【发布时间】：2015-07-16 11:02:04
【问题描述】：

我有一个奇怪的问题，即无线电输入没有填充角形模型。

除了单选输入之外的所有字段都填充模型...

无线电输入在下面表格的开头给出。我使用 ng-inspector，我可以看到，当我单击其中一个单选值时，不会填充 signupForm.member.role。

有人可以帮忙吗？

<form name="formCtrl" ng-submit="signup(formCtrl)" class="col-xs-12" novalidate role="form">
    <h4>{{'SIGNUP_FORM_ROLE_PREFIX' | translate}}</h4>
    <div class="btn-group Choix col-xs-12 text-center" data-toggle="buttons" ng-class="getCssClasses(formCtrl, formCtrl.signupRole)">
        <label class="btn StateButton col-xs-6">
            <img class="img-responsive" src="assets/media/img/parents.svg" />
            <input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_PARENTS" ng-required="true" />
            <span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_PARENTS' | translate}}</span>
        </label>
        <label class="btn StateButton col-xs-6">
            <img class="img-responsive" src="assets/media/img/professionel.svg" />
            <input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_CHILDCARE_WORKER" ng-required="true" />
            <span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_CHILDCARE_WORKER' | translate}}</span>
        </label>
        <div ng-messages="formCtrl.signupRole.$error" ng-if="formCtrl.$submitted">
            <div ng-message="required" class="control-label">{{'SIGNUP_FORM_ROLE_REQUIRED'| translate}}</div>
        </div>
    </div>
    <hr>
    <div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)">
        <div class="input-group">
            <span class="input-group-addon">
                                   <span class="glyphicon icon-Prenom" aria-hidden="true"></span>
            </span>
            <input type="text" name="firstName" ng-minlength="2" placeholder="{{'SIGNUP_FORM_FIRST_NAME' | translate}}" ng-model="signupForm.member.firstName" ng-required="true" class="form-control" />
            <span ng-if="isSuccessFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Valid" aria-hidden="true"></span></span>
            <span ng-if="isErrorFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Erreur" aria-hidden="true"></span></span>
        </div>
        <div ng-messages="formCtrl.firstName.$error" ng-if="formCtrl.$submitted">
            <div ng-message="required" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate}}</div>
            <div ng-message="minlength" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate }}</div>
        </div>
    </div>
</form>

这是一个正常工作的插件：http://plnkr.co/edit/lsaevbL0mBRku7zcrGDJ

可以注意到，即使选择了其中一个单选，在提交表单时也不会考虑单选...

【问题讨论】：

请将您的代码放入交互式演示中，在编辑帖子时按 ctrl/cmd + m，然后添加您的依赖项。我们都很乐意提供帮助，只是让我们更轻松一点
一个笨蛋会有所帮助
我正在尝试组合一个 jsfiddle。请忍受我。
我从 data-toggle attr 猜测您正在尝试使用 JQuery 插件？
我建议使用pure css approach 或UI Bootstrap，它提供了一组原生AngularJS 指令，您可以使用它们来代替bootstrap.js。

标签： angularjs

【解决方案1】：

只需使用value 而不是ng-value。请看这个工作演示：http://plnkr.co/edit/2EB4NvTO1StN50NIXOyn?p=preview。

你不应该使用ng-value，它正在寻找$scope.ROLE_BASIC_PARENTS。

检查AngularJS.org，那里的例子使用：

<input type="radio" ng-model="color.name" ng-value="specialValue">

在控制器中：

$scope.specialValue = {
    "id": "12345",
    "value": "green"
  };

【讨论】：