【问题标题】:Values not updating for dynamically added field in angular js角度js中动态添加字段的值未更新
【发布时间】:2017-09-22 09:38:36
【问题描述】:

我创建了一个动态添加字段的表单。添加效果很好,但我面临的问题是当我更新它时。表单中有两个文本框,一个文本区域和一个复选框。根据数据库字段的条件检查复选框。在编辑时,所有值都会更新,但如果我也取消选中复选框,复选框值总是设置为 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>

并且在 angular 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 中更新该值。 为文本框和文本区域工作......问题只发生在复选框

【问题讨论】:

    标签: angularjs checkbox


    【解决方案1】:

    编辑也许 is_photo 最好是一个布尔值,而不是字符串: 比你根本不需要使用 ngChange,你只需要 ng-model 和 ng-checked 我留下了这个plunkerng-change,这样你就可以监控复选框模型的值。

     <input type="checkbox"  ng-checked="choice.is_photo" ng-model="choice.is_photo" />
    

    【讨论】:

    • 但是第一次点击复选框时它不起作用..为什么?
    • 在 plunker 中,您已将 is_photo 的值设置为布尔值 .... 但从数据库中返回 0 和 1 .... 所以它第一次无法正常工作
    • 嗯,它必须是一个布尔值,在第一次点击之后,如果你选中它 ng-model="choice.is_photo" 变为真(而不是字符串“1”)或者如果你取消选中它变为假.第一次单击后无需将choice.is_photo 与“1”进行比较,因为它不再是字符串。很抱歉这个答案混淆了。如果您从 db 获得该对象,请通过它并将所有“1”更改为 true,将所有“0”更改为 false。如果您还有其他问题,请询问。也尝试登录控制台onchage,看看点击后model的值是多少。
    • @lignthe ...谢谢伙计..我已将值更改为布尔值,它可以工作
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多