Values not updating for dynamically added field in angular js

Question

I have created a form where fields are added dynamically.Adding works perfectly but the problem i am facing is when i am updating it.In the form there are two textboxes , a text area and a checkbox. Checkbox is checked depending upon the condition of a database field.At the time of editing all values are getting updated but the checkbox value is always getting set to true if i also unchecked the checkbox.

Below the code i am using

The Json i am receiving

$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"}]}}

In the html Part

<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>

And In the angular js controller

$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);
}

So how to do that if a checkbox is selected at the time of editing and if i unchecked it the value should be updated in the $scope.choices. Working for the text box and text area... problem is happening only with the checkbox

lingthe · Accepted Answer · 2017-09-22 11:34:39Z

1

EDIT Maybe it is better that is_photo to be a boolean, instead of string: Than you dont need to use ngChange at all, you just need ng-model and ng-checked I left in this plunker ng-change so you can monitor the values of the checkbox models.

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

edited Sep 22, 2017 at 11:34

answered Sep 22, 2017 at 10:35

lingthe

5991 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rahul Over a year ago

But it is not working on the first click to the checkbox .. why ?

Rahul Over a year ago

in the plunker you have set the value of is_photo in boolean .... but from the database it is returning 0 and 1 .... so it is not working on the first time

lingthe Over a year ago

Well it has to be a boolean, after frist click, if you check it ng-model="choice.is_photo" becomes true(instead of string "1") or if you uncheck it becomes false. There is no need to compare choice.is_photo with "1" after frist click because it is no longer a string. Sorry for this confussion with answers. If you get that object from db, go trough it and change all "1" to true and all "0" to false.Please ask if you have any more questions. Also try to log in the console onchage to see what is the value of the model after click.

Rahul Over a year ago

@lignthe ... thanks buddy .. i have changed the values to boolean and it works

Collectives™ on Stack Overflow

Values not updating for dynamically added field in angular js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related