How to get checkboxes to initialize based on model?

Question

I am writing my first non-tutorial angular.js web app. I am using two smart-tables and checklist-model. Here is the first one that uses a st-safe-src of all_types that is an array of json objects that look like this ...

[
  {
    "_id": "56417a9603aba26400fcdb6a",
    "type": "Beer",
    "__v": 0
  },
  {
    "_id": "56456140cb5c3e8f004f4c49",
    "type": "Skiing",
    "__v": 0
  },
  ...

Here is the html for the table I use to display this data:

  <table st-table="displayedCollection" st-safe-src="all_types" class="table table-striped">
      <thead>
          <tr>
              <th st-sort="type">Types</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="x in displayedCollection">
              <td><input type="checkbox" checklist-model="vendor.types" checklist-value="x.type">{{x.type}}</td>
          </tr>
          <tr><td>id ({{curid}}) {{vendor.types}}</td></tr>
      </tbody>
      <tfoot>
          <tr>
              <td colspan="5" class="text-center">
                  <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
              </td>
          </tr>
      </tfoot>
  </table>

This table looks like this when I load data into it. The checkboxes get checked to match the data from my model.

But when I try to do the same thing in a second smart table with more complete json objects that look like this ...

[
  {
    "_id": "569f047dd90a7874025b344e",
    "product_title": "Plugs",
    "product_img_001": "p001.jpg",
    "product_img_002": "p002.jpg",
    "product_vid_001": "bp.mov",
    "__v": 0,
    "product_sizes": [
      "Large",
      "Med.",
      "Small",
      "10.5"
    ],
    "product_types": [
      "Running Shoe"
    ]
  },
  {
    "_id": "569f3958b108a7d70201b89a",
    "product_title": "Back Scratcher",
    "product_img_001": "http://itchy.png",
    "product_img_002": "http://relief-at-last.png",
    "product_vid_001": "my-itch",
    "__v": 0,
    "product_sizes": [
      "Large"
    ],
    "product_types": [
      "Rocks"
    ]
  }
]

Here's the html I am using to display this data in a smart table:

  <table st-table="prodCollection" st-safe-src="all_products" class="table table-striped">
      <thead>
          <tr>
              <th st-sort="type">Products</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="x in prodCollection">
              <td><input type="checkbox" checklist-model="vendor.products" checklist-value="x">{{x.product_title}}</td>
          </tr>
          <tr><td>{{vendor.products}}</td></tr>
      </tbody>
      <tfoot>
          <tr>
              <td colspan="5" class="text-center">
                  <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
              </td>
          </tr>
      </tfoot>
  </table>

This table looks like this when I load data into it:

I had hoped that the checkbox would be checked, but they do not get checked. If make this change ...

<td><input type="checkbox" checklist-model="vendor.products" checklist-value="x.product_title">{{x.product_title}}</td>

... the correct checkboxes get checked but just the product's title will be posted. What do I need to do to get the checkboxs to display checked and be able to post the whole product data?

I have added a plunker example: http://plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l

Peso

You're trying to assign an object to a true/false value in the checkbox. x is an object in a list, you need a property of x, such as x.checked or similar. sorry its not a solution, but maybe you can think about a solution – Amata

Your plunkr example didn't work for me at all. Most probably x is not equal to any of the vendor.products - could be to different properties? – Monaghan

Oops ... sorry I have fixed the plunker plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l – Peso

What do you mean post the whole product data? If you mean the form submit, then you cannot submit whole JSON object, but only strings. – Monaghan

Sorry I am new to plunkr too. This is the correct url plnkr.co/edit/8CJ3Xh?p=info – Peso

Hi Adrian Ber, Sorry it has been a while since I got back to you. I am able to submit whole JSON objects in another part of my app. Here is a plunker that demonstrates that embed.plnkr.co/wd87StROz8Yi5dUq3Nt1 If you could please take a look and let me know what I am doing wrong in my original question. Thanks! – Peso

Answer 1

You can use as checklist-value the id instead of the Object as say section on doc Array of objects (pick id)

<input type="checkbox" checklist-model="vendor.products" checklist-value="x._id">

Or if you need use the Object as selected products (checklist-value="x") you need use checklist-comparator because in your plunker the selected array and full product list don't have the same references. The comparator must match the equal objects by _id. Try this

  <input type="checkbox" checklist-comparator="._id" checklist-model="vendor.products" checklist-value="prod" />

Alvinaalvine

Thanks for reply but I tried using: <input type="checkbox" checklist-model="vendor.products" checklist-value="prod._id" /> in my plunkr: plnkr.co/edit/8CJ3Xh?p=info but that did not do it. – Peso

Forked plunkr with the checklist-comparator: plnkr.co/edit/N1MN8d?p=preview – Alvinaalvine

How did you figure this out. I must have missed checklist-comparator in the checklist-model docs? – Peso

Yep it is right there in the in the readme.mdin the usage section github.com/vitalets/checklist-model – Peso

Answer 2

There is an option called ng-true-value="1". This will check with the values of the ng-model. It will work like if(ng-model(Name) == 1). Try this out.

<input type="checkbox" name="checkbox_demo_4" id="checkbox_demo_4"
    ng-model="temp.taxable_type"
    ng-true-value="1"
/>

In this, 1 is the true value that I stored in the DB. So it is checking automatically if the ng-model value contains 1. All the best.

Spoon

Thanks for the reply but adding ng-true-value="1" did not seem to change anything. – Peso

@RedCricket Hey man, I just saw your Plunkr example. I am unable to see a "true" value in the checkbox field. Try with ng-true-value with a true value to the field. – Spoon

Answer 3

After reading carefully your question, and supossing that you want the same behaviour as the first smart table, the problem I think you had can be solved by setting the product_title as the checklist-value of the input field, something like this :

 <input type="checkbox" checklist-model="vendor.products" checklist-value="prod.product_title" />

Here the plunkr associated

http://plnkr.co/edit/5an1Fx?p=preview

Odelle

I was hoping that check boxes for 'Plugs' and 'Back Scratcher' would become checked when the Edit button is clicked. – Peso