当ng-repeat上的复选框具有必需的属性时，Angular ng-model更改为undefined [英] Angular ng-model changes to undefined when checkbox on ng-repeat has the required attribute
问题描述
我有一系列的应用程序。
$ scope.applicant.selectedApps = [];该数组的子集被推入另一个数组中。
$ scope.applicant.applications = applications;
angular.forEach（application，function（application）{
if（application.isSelected）{
$ scope.applicant.selectedApps .push（application）;
}
}
我知道有两个循环遍历这些数组的循环：
< div class =row>
< div class =form-group col-sm-10 col-sm- offset-1>
< div class =radio>
< label>
< input type =radioname =intentng-model =申请人。内容value =Yrequired />是
< / label>
< / div>
< div class =rowng-show =申请人.intent =='Y'>
< div class =col-xs-11 col-xs-offset-1>
< div class =rowng-repeat =app in applicant.selectedApps>
< div class =col-sm-11 col-sm-offset-1>
< d iv class =checkbox>
< label>
< input id =Prog {{app.appid}}name =Progstype =checkboxng-model =app.isSelectedng-change =appChange（app） 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 =radioname =intentng-model =applicant.intentvalue =Nrequired /> NO
< / label>
< / div>
< div class =rowng-show =applicant.intent =='N'>
< div class =col-xs-11 col-xs-offset-1>
< div class =rowng-repeat =dApp in applicant.applications>
< div class =col-sm-11 col-sm-offset-1>
< div class =checkbox>
< label>
将输入的ID = dProg {{dApp.appid}} 名称= dProgs 类型= 复选框 NG-模型= dApp.isSelected NG-变化= 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初始化的应用程序都将被设置为undefined只要单选按钮切换到否。当切换回是时，选择切换回假。
每当单选按钮值改变时，这会导致dProgChange触发。
我无法弄清楚为什么isSelected切换到未定义状态。
UPDATE
尝试创建简化示例时，我注意到只要需要复选框就会发生问题。
在列出的下拉菜单中，取消选中复选框后，该复选框的模型值将设置为undefined。在我看来，这是我遇到的同样的问题。
http://plnkr.co/编辑/ SBsdew8tzWdNgNOf6W1c p =
这是AngularJS方式信息（ NG-模型和 NgModelController ）应该可以工作。
NgModelController 有两个属性： $ viewValue （用户输入的值）和 $ modelValue （绑定到您的模型的值）。当用户输入的值未通过验证时， NgModelController 会将模型设置为undefined。
在AngularJS 1.3中，添加了 ng-model-options 指令。它允许您配置模型如何/何时更新。您可以使用 allowInvalid 选项来防止您的模型设置为未定义：
< input type =checkbox
ng-model =myModel.value
ng-model-options ={allowInvalid：true}>
I have an array of applications. A subset of that array is pushed into another array.
$scope.applicant.selectedApps = [];
$scope.applicant.applications = applications;
angular.forEach(applications, function (application) {
if(application.isSelected){
$scope.applicant.selectedApps .push(application);
}
}
I know have 2 ng-repeats that loop over those arrays:
<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>
the two change functions are as followed:
$scope.dProgChange = function (app) {
if (app.isSelected) {
$scope.appCount++;
} else {
$scope.appCount--;
}
};
$scope.ProgChange = function (app) {
if (app.isSelected) {
$scope.selectedAppCount++;
} else {
$scope.selectedAppCount--;
}
};
What i observe is that every app that was initializes with "isSelected" = false will be set to undefined as soon as the radio button is switched to "NO". When switched back to "YES" is selected switches back to false.
This causes the dProgChange to trigger every time the Radio button value changes.
I can't figure out why the "isSelected" switches to undefined.
UPDATE While trying to create a simplified example, i noticed that the problem occurs as soon as the checkbox is required. In the plunker listed bellow, the model value for the checkbox is set to undefined as soon as the checkbox is unchecked. That seems to me the same issue i am having.
http://plnkr.co/edit/SBsdew8tzWdNgNOf6W1c?p=info
This is the way AngularJS (ng-model and NgModelController) is supposed to work.
NgModelController has two properties: $viewValue (value entered by user) and $modelValue (value bound to your model). When the value entered by the user fails validation, NgModelController sets the model to undefined.
In AngularJS 1.3, they added the ng-model-options directive. It lets you configure how/when the model gets updated. You can use the allowInvalid option to prevent your model from being set to undefined:
<input type="checkbox"
ng-model="myModel.value"
ng-model-options="{allowInvalid: true}">
这篇关于当ng-repeat上的复选框具有必需的属性时，Angular ng-model更改为undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
