我创建了一个动态添加字段的表单。添加工作完美但我面临的问题是我正在更新它。在表单中有两个文本框,一个文本区域和一个复选框。根据数据库字段的条件检查复选框。在编辑时,所有值都会更新,但如果我也取消选中该复选框,则复选框值始终设置为true。
我正在使用的代码
我收到的Json
$scope.choices = {"success":"yes","msg":"","data":{"checkListValues":[{"id":"81","checklist_id":"1","number":"1","short_text":"shorttext 12","long_text":"longtext12","is_photo":"1"},{"id":"82","checklist_id":"1","number":"2","short_text":"shorttext21","long_text":"longtext22","is_photo":"1"}]}}
在html部分
中<a ng-click="addNewChoice()" class="btn btn-success ng-scope" >Add More</a>
<tr data-ng-repeat="choice in choices track by $index">
<td>
<div class="number-part">
<input type="text" ng-model="choice.number" required />
</div>
</td>
<td>
<div class="shorttext-part">
<input type="text" ng-model="choice.short_text" ng-trim="false" maxlength="40" required/>
<div class="clearfix"></div>
<span class="character-count">{{40 - choice.short_text.length}} Characters left</span>
</div>
</td>
<td>
<div class="shorttext-part">
<textarea ng-model="choice.long_text" ng-trim="false" maxlength="255" required></textarea>
<div class="clearfix"></div>
<span class="character-count">{{255 - choice.long_text.length}} Characters left</span>
</div>
</td>
<td>
<input type="checkbox" ng-checked="choice.is_photo == 1" ng-model="choice.is_photo"/>
</td>
<td>
<a ng-if="!$first" ng-click="removeChoice($index)">
<i class="fa fa-minus"></i>
</a>
</td>
并且在角度js控制器中
$scope.removeChoice = function(z)
{
var lastItem = $scope.choices.length-1;
$scope.choices.splice(z,1);
};
$scope.addNewChoice = function()
{
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
//console.log("=====",$scope.choices);
};
$scope.item = [];
var newItem = {};
for( var i in $scope.choices)
{
newItem= $scope.choices[i];
$scope.item.push(newItem);
}
那么如果在编辑时选中了一个复选框,如果取消选中它,该值应该在$ scope.choices中更新。 使用文本框和文本区域...问题只发生在复选框
答案 0 :(得分:1)
编辑也许最好将is_photo作为布尔值,而不是字符串: 你根本不需要使用ngChange,你只需要ng-model和ng-checked 我离开了plunker ng-change,因此您可以监控复选框模型的值。
<input type="checkbox" ng-checked="choice.is_photo" ng-model="choice.is_photo" />