如何获取基于模型初始化的复选框？

Question

我正在编写我的第一个非教程angular.js网络应用程序.我正在使用两个智能表和清单模型.下面是一个使用第一个st-safe-src的all_types是看起来像这样JSON对象的数组...

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

这是我用来显示这些数据的表的html:

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

当我将数据加载到其中时,此表看起来像这样.选中复选框以匹配我的模型中的数据.

但是当我尝试在第二个智能表中做同样的事情时,更完整的json对象看起来像这样......

[
  {
    "_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"
    ]
  }
]

这是我用来在智能表中显示这些数据的html:

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

当我将数据加载到其中时,此表看起来像这样:

我曾希望检查复选框,但不会检查它们.如果做出这个改变......

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

...选中正确的复选框,但只会发布产品的标题.我需要做什么才能显示已选中的复选框并能够发布整个产品数据？

我添加了一个plunker示例:http://plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l

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

或者，如果您需要使用对象作为所选产品 ( checklist-value="x")，则需要使用checklist-comparator，因为在您的 plunker 中，所选数组和完整产品列表没有相同的引用。比较器必须通过 _id 匹配相等的对象。尝试这个

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