Angular (ionic) render true values from checkbox

Question

I am using ionic + parse js sdk and would like to render only the true values from a checkbox.

Below is the scope:

$scope.Diagnosed = [
    { text: "Allergies", checked: true},
    { text: "ADHD", checked: false},
    { text: "Alcohol/Drug Dependence", checked: false},
    { text: "Asthma", checked: false},
    { text: "Autism", checked: false},
    { text: "Cancer", checked: false},
    { text: "Diabetes", checked: false},
    { text: "Eating Disorder", checked: false},
    { text: "Fertility Problems", checked: false},
    { text: "Heart Disease", checked: false},
    { text: "High Cholesterol", checked: false},
    { text: "Menopause", checked: false},
    { text: "Mood Disorders (e.g., anxiety, depression)", checked: false},
    { text: "Obesity", checked: false},
    { text: "Stroke", checked: false},
    { text: "Prefer not to answer", checked: false}

    ];

it looks like the following on the first page:

<ion-item  ng-class="" ng-repeat="object in lines" class="item-thumbnail-left item-icon-right item-text-wrap" href="#/moresurvey/{{object.id}}">

<a><h2>{{object.visafname}}</h2></a>
<h2 >{{object.visalname}}</h2>
<p>{{object.gender}}</p>
   <i class="icon ion-chevron-right icon-accessory"></i>

         <ion-option-button class="button" ng-click="deleteEvent(line)">
          Delete
        </ion-option-button>
      </ion-item>

And I am rendering the values on a different page using the below code:

query.get(id,{
success: function(response){

  var currentStart = 1
  for (var i = currentStart; i < response.length; i++) {
    var object = response[i];
          }

 $scope.Details = {
     diagnosed: response.get('diagnosed'),

  };
},
error: function(error){
   alert("Error: " + error.code + " " + error.message);
}
  });
};

And my html looks like the following:

</ion-item class="more-list">
  <ion-item class="item more-item">
    <i class="icon-left ion-cash more-icon"></i>
    <p class="moredetails location"> {{Details.diagnosed}}</p>
  </ion-item>
  </ion-item>
</ion-list>

On that page, the data is rendered like this:

 [{"checked":true,"text":"Allergies"},{"checked":false,"text":"ADHD"},{"checked":false,"text":"Alcohol/Drug Dependence"},{"checked":false,"text":"Asthma"},{"checked":false,"text":"Autism"},{"checked":false,"text":"Cancer"},{"checked":false,"text":"Diabetes"},{"checked":false,"text":"Eating Disorder"},{"checked":false,"text":"Fertility Problems"},{"checked":false,"text":"Heart Disease"},{"checked":false,"text":"High Cholesterol"},{"checked":false,"text":"Menopause"},{"checked":false,"text":"Mood Disorders (e.g., anxiety, depression)"},{"checked":false,"text":"Obesity"},{"checked":false,"text":"Stroke"},{"checked":false,"text":"Prefer not to answer"}]

But how do I only display the values that have been checked as true?

Thank you in advance..

Gayathri Mohan · Accepted Answer · 2016-06-27 03:39:43Z

0

Hi in your HTMl just check the condition for ng-if="item.checked" so if true only it will display

HTML

<ion-item ng-repeat="item in items" item="item" class="item-remove-animate">
<div class="p10" ng-if="item.checked">
    <ion-checkbox ng-model="item.checked"></ion-checkbox>
    <i class="icon-left ion-cash more-icon"></i>
    <p class="moredetails location"> {{item.text}}</p>
</div>

answered Jun 27, 2016 at 3:39

Gayathri Mohan

2,9724 gold badges21 silver badges26 bronze badges

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

2 Comments

user2988188 Over a year ago

Thank you for your response. Any idea how to do this when the data is being rendered on a different page? On the "moredetails" page I am not using ng-repeat to render results.

user2988188 Over a year ago

I've updated the post to reflect what I am talking about

Collectives™ on Stack Overflow

Angular (ionic) render true values from checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related