0

I have list that gets filled up with 'allergies' that it fetches from a web service. So allergies could look something like this:

$scope.formData.allergies = [
  {
    'id' : 1, 
    'description' : 'Potassium Cyanide'
  },
  {
    'id' : 2, 
    'description' : 'Blue ring octopus'
  },
  {
    'id' : 3, 
    'description' : 'Poison dart frog'
  },
];

Which then gets used to populate a list of checkbox inputs:

 <li class="item item-checkbox" ng-repeat="allergy in formData.allergies">
   <label class="checkbox">
     <input type="checkbox" name="selectedAllergies" value="allergy.id">
   </label>
   {{allergy.description | uppercase}}
 </li>

But I'm struggling on how to find out what the user actually selected? Doing this after the user selected a few:

console.log($scope.selectedAllergies);

just returns undefined...

Improve this question

2 Answers 2

Reset to default
1

Your checkbox input has a value (what it will set the model to) but no ng-model, so it doesn't know what to do with this value.

I think the easiest would be to modify the allergies array, so you could have the following code :

<li class="item item-checkbox" ng-repeat="allergy in formData.allergies">
    <label class="checkbox">
        <input type="checkbox" name="selectedAllergies" ng-model="allergy.selected">
    </label>
    {{allergy.description | uppercase}}
</li>

Without any value the allergy.selected should be set to a truthey or falsey value depending on the checkbox state.

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

6 Comments

Thanks so much. However, I can't change the JSON that comes back from the web service. Is there a way to modify the $scope.formData.allergies to go and add a 'checked' property to each item in the array?
@DeanGibson That's actually what I meant. The checkbox values on change will be added to a new 'selected' property if it didn't exist. I think until you change its value it will be undefined (as in the property doesn't exist) but that's still a falsey value so that shouldn't pose problem.
Ahhh I see! So then to get all the selected allergies I have to loop through the entire array and just throw all the 'selected=true' ones into another 'selectedAllergies' array?
@DeanGibson that would indeed work, however I think you'd rather use a filter({selected: true})(see filters). It really depends on what data you need in the end. If it's only the allergy.id a for loop might be as good.
that's so clever using a filter! Thanks so much!
|
0

You need to add an ng-model to the <input> element to do the binding

<input ng-model="allergy.checked" type="checkbox">

And then initialise it in the controller like this 

$scope.formData.allergies = [
  {
    'id' : 1, 
    'description' : 'Potassium Cyanide',
     'checked' : false
  },
  {
    'id' : 2, 
    'description' : 'Blue ring octopus',
     'checked' : false
  },
  {
    'id' : 3, 
    'description' : 'Poison dart frog',
     'checked' : false
  },
];

Initially all of them will be in un-checked state and when the user selects a check box, say the first one, the value of $scope.formData.allergies[0].checked will be true

Improve this answer

4 Comments

Thanks so much, however.. what do I do when I can't edit the JSON?
May be you can create a copy of that json and work with it? Is that possible? Or have another json which will only hold the checked states and do the ng-repeat from that json.
@DhanushGopinath I don't think there is a need to. At first allergy.checked will be undefined, which is a falsey value. If for some reason it is needed you can still work on the formData.allergies returned by the WS, using something like Array.prototype.map
Yea. Learning for me :) Thank You

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.