当ng repeat上的复选框具有必需的属性时，角度ng模型将变为未定义

Angular ng-model changes to undefined when checkbox on ng-repeat has the required attribute

本文关键字：ng 模型 角度 未定义 复选框 repeat 属性      更新时间：2023-09-26

我有一组应用程序。该数组的一个子集被推入另一个数组。

$scope.applicant.selectedApps = [];
$scope.applicant.applications = applications;
angular.forEach(applications, function (application) {
    if(application.isSelected){
        $scope.applicant.selectedApps .push(application);
    }
}

我知道在这些阵列上有2ng的重复循环：

 <div class="row">
        <div class="form-group col-sm-10 col-sm-offset-1">
            <div class="radio">
                <label>
                    <input type="radio" name="intent" ng-model="applicant.intent" value="Y" required />YES
                </label>
            </div>
            <div class="row" ng-show="applicant.intent == 'Y'">
                <div class="col-xs-11 col-xs-offset-1">
                    <div class="row" ng-repeat="app in applicant.selectedApps">
                        <div class="col-sm-11 col-sm-offset-1">
                            <div class="checkbox">
                                <label>
                                    <input id="Prog{{app.appid}}" name="Progs" type="checkbox" ng-model="app.isSelected" ng-change="appChange(app)"  ng-required="applicant.intent == 'Y'" />
                                    {{app.Objective}} - {{app.Name}} - {{app.Description}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div class="row">
        <div class="form-group col-sm-10 col-sm-offset-1">
            <div class="radio">
                <label>
                    <input type="radio" name="intent" ng-model="applicant.intent" value="N" required />NO
                </label>
            </div>
            <div class="row" ng-show="applicant.intent == 'N'">
                <div class="col-xs-11 col-xs-offset-1">
                    <div class="row" ng-repeat="dApp in applicant.applications">
                        <div class="col-sm-11 col-sm-offset-1">
                            <div class="checkbox">
                                <label>
                                    <input id="dProg{{dApp.appid}}" name="dProgs" type="checkbox" ng-model="dApp.isSelected" ng-change="dProgChange(dApp)" ng-required="applicant.intent == 'N' && appCount <= 0" />
                                    {{dApp.Objective}} - {{dApp.Name}} - {{dApp.Description}}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

两个变化函数如下：

$scope.dProgChange = function (app) {
    if (app.isSelected) {
        $scope.appCount++;
    } else {
        $scope.appCount--;
    }
};
$scope.ProgChange = function (app) {
    if (app.isSelected) {
        $scope.selectedAppCount++;
    } else {
        $scope.selectedAppCount--;
    }
};

我观察到的是，一旦单选按钮切换到"否"，每个用"isSelected"=false初始化的应用程序都将被设置为未定义。当切换回"YES"时，选择切换回false。

这会导致每次单选按钮值更改时触发dProgChange。

我不明白为什么"isSelected"切换到undefined。

更新在尝试创建一个简化的示例时，我注意到只要需要复选框，问题就会出现。在下面列出的plunker中，只要取消选中复选框，复选框的模型值就会设置为未定义。在我看来，这和我现在面临的问题是一样的。

http://plnkr.co/edit/SBsdew8tzWdNgNOf6W1c?p=info

这是AngularJS（ng-model和NgModelController）的工作方式。

NgModelController有两个属性：$viewValue（用户输入的值）和$modelValue（绑定到模型的值）。当用户输入的值未通过验证时，NgModelController将模型设置为未定义。

在AngularJS 1.3中，他们添加了ng模型选项指令。它允许您配置模型更新的方式/时间。您可以使用allowInvalid选项来防止您的模型被设置为未定义：

<input type="checkbox"
    ng-model="myModel.value"
    ng-model-options="{allowInvalid: true}">

因此，我将添加到这个答案中以供将来参考。这同样适用于<input>。如果你有这样的东西

<input ng-model="speaker.vrange" ng-blur= "updateSpkV()" type="number" data-placement="right" min ="0" max="10"/>

如果将值设置为范围之外的值，并且将模型变量设置为undefined，那么您将得到无效的输入。当我直接输入一个越界值而不是使用向上/向下箭头来调整值时，这就成了我的一个问题。

相关文章：