当 ng-repeat 上的复选框具有所需属性时,Angular ng-model 更改为 undefined

Posted

技术标签:

【中文标题】当 ng-repeat 上的复选框具有所需属性时,Angular ng-model 更改为 undefined【英文标题】:Angular ng-model changes to undefined when checkbox on ng-repeat has the required attribute 【发布时间】:2015-05-23 06:09:55 【问题描述】:

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

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

我知道有 2 个 ng 重复循环遍历这些数组:

 <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="Progapp.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="dProgdApp.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”切换为未定义。

更新 在尝试创建一个简化示例时,我注意到一旦需要复选框就会出现问题。 在下面列出的 plunker 中,一旦取消选中复选框,复选框的模型值就会设置为 undefined。在我看来,这与我遇到的问题相同。

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

【问题讨论】:

是否可以将其发布为代码 sn-p 以便我们可以运行和检查? 【参考方案1】:

这就是 AngularJS(ng-modelNgModelController)应该工作的方式。

NgModelController 有两个属性:$viewValue(用户输入的值)和$modelValue(绑定到模型的值)。当用户输入的值验证失败时,NgModelController 将模型设置为未定义。

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

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

【讨论】:

感谢您的回复。那效果很好。我还有一个问题要更好地了解正在发生的事情。如果我取消选中一个复选框,为什么该值无法通过验证。 'false' 不是有效值吗? 好点!在大多数情况下,False 是一个完全可以接受的值。我的假设是,对于复选框,required 属性似乎强制您检查复选框,而不是它具有值。【参考方案2】:

因此,我将添加到此答案以供将来参考。这也适用于&lt;input&gt;。如果你有诸如

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

如果您将值设置为超出范围的值并且模型变量将设置为未定义,那么您将获得无效输入。当我直接输入超出范围的值而不是使用向上/向下箭头来调整值时,这成为我的一个问题。

【讨论】:

以上是关于当 ng-repeat 上的复选框具有所需属性时,Angular ng-model 更改为 undefined的主要内容,如果未能解决你的问题,请参考以下文章

复选框的属性[重复]

Yii2:如何使用jQuery删除所需的属性

复选框在手风琴的 ng-repeat 中被禁用

AngularJS ng Repeat - 使用复选框按单个对象属性筛选列表

如何在angularjs中使用带有嵌套ng-repeat的复选框

Angular.js ng-repeat 按具有多个值之一(或值)的属性过滤